JqueryUI Sortable - Funktion zum Verschieben nur von Elementen innerhalb der Unterliste (3. Position)

Nov 23 2020

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

1 Vickel Nov 24 2020 at 20:43

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 connectWithFunktionalitä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>