JQuery Sortierbar + Bootstrap - 1. Spalte zur letzten Spalte - Element verschwindet

Question

Ich versuche herauszufinden, wie Sie JQuery Sortable mit Bootstrap v3 verwenden.

Ich habe 3 Spalten und ich möchte, dass die Liste der Elemente in Spalte 1 gezogen und in Spalte 3 abgelegt wird - Spalte 2 enthält einige Schaltflächen, um alle Elemente hin und her zu bewegen.

Die Funktionalität funktioniert jedoch beim Ziehen, das Objekt verschwindet hinter der mittleren Spalte.

Ich habe versucht, Z-Index der Spalte und die Elemente zu verschieben, aber immer noch keine Freude.

Hier ist eine grundlegende Geige ... JsFiddle

$(".sortableList").sortable({ 
 
    cancel: ".fixed", 
 
    connectWith: '.sortableList', 
 
    distance: 6, 
 
    opacity: 0.5 
 
});

#available { 
 
    background-color: #ebebeb; 
 
    height: 200px; 
 
} 
 

 
#selected { 
 
    background-color: #ebebeb; 
 
    height: 200px; 
 
} 
 

 
.item { 
 
    margin: 1px; 
 
    background-color: #bebebe; 
 
} 
 

 
.sortPlaceholder { 
 
    opacity: 0.25; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div id="sortContainer" class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-5 scroll-vertical"> 
 
     <div style="overflow: hidden; position: relative"> 
 
     <div id="available" class="sortableList" runat="server"> 
 
      <div class="item">Item 1</div> 
 
      <div class="item">Item 2</div> 
 
      <div class="item">Item 3</div> 
 
      <div class="item">Item 4</div> 
 
      <div class="item">Item 5</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     <input type="button" class="btn btn-primary" value="<<" onclick="removeAll()" /> 
 
     <input type="button" class="btn btn-primary" value=">>" onclick="addAll()" /> 
 
    </div> 
 
    <div class="col-xs-5 scroll-vertical"> 
 
     <div style="overflow: hidden; position: relative"> 
 
     <div id="selected" class="sortableList" runat="server"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

gibt es ein div mit overflow:hidden direkt im scroll-vertical. Sie müssen, dass sie sichtbar entfernen oder

dann ändern, wenn Sie innerhalb der Behälter müssen blättern, Überlauf-y Auto zu .sortableList

siehe unten

$(".sortableList").sortable({ 
 
    cancel: ".fixed", 
 
    connectWith: '.sortableList', 
 
    distance: 6, 
 
    opacity: 0.5 
 
});

.sortableList { 
 
    overflow-y:auto; 
 
} 
 
#available { 
 
    background-color: #ebebeb; 
 
    height: 50px; 
 

 
} 
 

 
#selected { 
 
    background-color: #ebebeb; 
 
    height: 200px; 
 

 
} 
 

 
.item { 
 
    margin: 1px; 
 
    background-color: #bebebe; 
 
} 
 

 
.sortPlaceholder { 
 
    opacity: 0.25; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div id="sortContainer" class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-5 scroll-vertical"> 
 
     <div style="overflow: visible; position: relative"> 
 
     <div id="available" class="sortableList" runat="server"> 
 
      <div class="item">Item 1</div> 
 
      <div class="item">Item 2</div> 
 
      <div class="item">Item 3</div> 
 
      <div class="item">Item 4</div> 
 
      <div class="item">Item 5</div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-2"> 
 
     <input type="button" class="btn btn-primary" value="<<" onclick="removeAll()" /> 
 
     <input type="button" class="btn btn-primary" value=">>" onclick="addAll()" /> 
 
    </div> 
 
    <div class="col-xs-5 scroll-vertical"> 
 
     <div style="overflow: visible; position: relative"> 
 
     <div id="selected" class="sortableList" runat="server"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Snippet hinzufügen

Ich habe eine Bibliothek erstellt, um das bootstraps-Grid in eine Drag-and-Drop-Sache umzuwandeln und die Reaktionsfähigkeit zu erhalten. https://rosspi.github.io/gridstrap.js/