Bootstrap Multiselect Bildlaufleiste Drag funktioniert nicht in Bootstrap Modal

Question

Ich versuche Bootstrap Multi-Select in einem Bootstrap-Modal zu verwenden. Ich kann es initialisieren und mache damit keine Probleme. Ich stehe vor einem wirklich nervigen Problem, bei dem, wenn ich versuche, die Bildlaufleiste in das Modal zu ziehen, schließt sich das Dropdown. Ich habe versucht, denselben Code außerhalb des Bootstrap-Modals zu kopieren und zu reproduzieren. Ich habe das jsFiddle erstellt, um das Problem zu demonstrieren.

Das normale Scrollen funktioniert einwandfrei, aber das Ziehen der Bildlaufleiste im Modal schließt das Dropdown-Menü. Irgendeine Möglichkeit, dieses Problem zu beheben?

JSFiddle Link

<!-- Button trigger modal --> 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

<select id="example-multiple-selected1" multiple="multiple"> 
    <option value="1">Option 1</option> 
    <option value="2" selected="selected">Option 2</option> 
    <!-- Option 3 will be selected in advance ... --> 
    <option value="3" selected="selected">Option 3</option> 
    <option value="4">Option 4</option> 
    <option value="5">Option 5</option> 
    <option value="6">Option 6</option> 
</select> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     <select id="example-multiple-selected" multiple="multiple"> 
      <option value="1">Option 1</option> 
      <option value="2" selected="selected">Option 2</option> 
      <!-- Option 3 will be selected in advance ... --> 
      <option value="3" selected="selected">Option 3</option> 
      <option value="4">Option 4</option> 
      <option value="5">Option 5</option> 
      <option value="6">Option 6</option> 
     </select> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 
<script> 
    $('#example-multiple-selected').multiselect({ 
      maxHeight: 100 
    }); 
    $('#example-multiple-selected1').multiselect({ 
      maxHeight: 100 
    }); 
</script> 

Answer 1

Hier ist Ihre Lösung:

$('.modal').on('mousedown mouseup click', '.multiselect-container', function(e) { 
    e.preventDefault(); 
}); 

Arbeits Jsfiddle: https://jsfiddle.net/scooterlord/hdnf9x61/10/