JqueryUI Sortable - Funktion zum Verschieben nur von Elementen innerhalb der Unterliste (3. Position)
Ich versuche, eine bestimmte Funktionalität mit jquery sortable festzulegen. Ich scheine nah dran zu sein, treffe aber ein Problem. Ich brauche die Unterpositionen, um nur auf Position 3 zu wechseln - unter den Kontotypen
http://jsfiddle.net/Davos8549/x6f0upng/1/
Ich möchte nur, dass die Unterelemente per Drag & Drop in andere Listen mit der Klasse = "hasItems" verschoben werden können.
Ich sollte weiterhin in der Lage sein, AR, VZ, BANK innerhalb ihres Hauptcontainers "Asset" zu verschieben. Aber ich sollte nicht in der Lage sein, das Ganze in eine Unterliste aufzunehmen (was das Problem ist, das ich jetzt habe).
Asset
AR
subitem2-1
subitem3-15
subitem3-25
subitem2-2
subitem2-3
subitem2-4
VZ
subitem3-1
subitem3-2
subitem1-35
subitem3-3
subitem3-4
Bank
subitem1-1
subitem1-2
subitem3-45
subitem1-3
subitem1-4
Liability
Bank5
subitem1-15
subitem1-25
subitem1-45
AR5
subitem2-15
subitem2-25
subitem2-35
subitem2-45
VZ5
subitem3-35
Ich glaube, die Lösung könnte in diesem Code liegen:
<script>
$(function() { $('ul.mainlist').sortable({
connectWith: 'ul.mainlist',
beforeStop: function(ev, ui) {
if ($(ui.item).hasClass('hasItems') && $(ui.placeholder).parent()[0] != this) {
$(this).sortable('cancel'); } } }); $('ul.sublist').sortable({
connectWith: 'ul.sublist'
});
});
</script>
Antworten
Sie müssen Ihre DOM-Elemente, die Sie verschieben möchten, genauer identifizieren:
Zuerst habe ich einige geringfügige Änderungen an Ihrem HTML-Code vorgenommen und die Klasse "Gruppe" zum <li>
Tag der Gruppen Bank und Haftung hinzugefügt , damit sie leichter identifiziert werden können.
Ich habe auch die Klasse "verbunden" zu den Unterlisten hinzugefügt, die ich austauschbar machen möchte. Als Beispiel, dass Sie sowohl vollständige austauschbare Unterelemente als auch Unterelemente haben können, die nur innerhalb ihrer eigenen Gruppe sortierbar sind. Diese Klasse „verbunden“ in der verwendet wird , sortable()
Funktion connectWith
Funktionalität, siehe Connect Listen
Falls eine Gruppe leer wird, müssen Sie eine Mindesthöhe definieren, um Elemente wieder in diese leere Gruppe verschieben zu können.
dann habe ich die sortierbare geändert in:
$(function() { $('li.group ul.sublist').sortable({
});
$('.hasItems ul.sublist').sortable({
connectWith: ".connected"
}).disableSelection();
});
Damit können Sie sich jetzt wie gewünscht bewegen.
Überprüfen Sie die Geige für Details oder
$(function() {
$('li.group ul.sublist').sortable({ }); $('.hasItems ul.sublist').sortable({
connectWith: ".connected"
}).disableSelection();
});
body
{
font-family: Arial, Tahoma, San-Serif;
font-size: 12px;
}
ul {
padding: 0;
list-style-type: none;
}
p
{
margin: 0 0 20px;
}
ul.mainlist
{
float: left;
margin: 0 20px 0 0;
width: 100px;
}
ul.mainlist li
{
background: #fff;
border: solid 1px #ccc;
padding: 10px;
width:100%;
}
ul.sublist
{
min-height: 35px;
background: gold;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
crossorigin="anonymous"></script>
<p>sublists shouldn't be able to be dragged out of their normal list</p>
<ul id="list1" class='mainlist'>
<li class="group">Asset
<ul class="sublist">
<li class="hasItems">Bank
<ul class="sublist connected">
<li>subitem1-1</li>
<li>subitem1-2</li>
<li>subitem1-3</li>
<li>subitem1-4</li>
</ul>
</li>
<li class="hasItems">AR
<ul class="sublist connected">
<li>subitem2-1</li>
<li>subitem2-2</li>
<li>subitem2-3</li>
<li>subitem2-4</li>
</ul>
</li>
<li class="hasItems">VZ
<ul class="sublist connected">
<li>subitem3-1</li>
<li>subitem3-2</li>
<li>subitem3-3</li>
<li>subitem3-4</li>
</ul>
</li>
</ul>
</li>
<li class="group">Liability
<ul class="sublist">
<li class="hasItems">Bank5
<ul class="sublist connected">
<li>subitem1-15</li>
<li>subitem1-25</li>
<li>subitem1-35</li>
<li>subitem1-45</li>
</ul>
</li>
<li class="hasItems">AR5
<ul class="sublist">
<li>subitem2-15</li>
<li>subitem2-25</li>
<li>subitem2-35</li>
<li>subitem2-45</li>
</ul>
</li>
<li class="hasItems">VZ5
<ul class="sublist">
<li>subitem3-15</li>
<li>subitem3-25</li>
<li>subitem3-35</li>
<li>subitem3-45</li>
</ul>
</li>
</ul>
</li>
</ul>