JqueryUI Sortable - funkcja umożliwiająca przenoszenie elementów tylko w ramach podlisty (3. pozycja)

Question

Próbuję ustawić określoną funkcjonalność za pomocą sortowania jquery. Wydaje mi się, że jestem blisko, ale napotykam problem. Potrzebuję elementów podrzędnych, aby przejść tylko do pozycji poziomu 3 - w ramach typów kont

http://jsfiddle.net/Davos8549/x6f0upng/1/

Chcę tylko, aby elementy podrzędne można było przeciągać - upuszczać na inne listy, które mają atrybut class = "hasItems"

Nadal powinienem być w stanie przenieść AR, VZ, BANK w jego głównym kontenerze „Asset”. Ale nie powinienem być w stanie wrzucić całej rzeczy do podlisty (co jest problemem, który mam teraz).

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

Myślę, że rozwiązanie mogłoby znajdować się w tym kodzie:

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

Answer 1

Musisz być bardziej szczegółowy w określaniu elementów DOM, które chcesz przenieść:

Najpierw dokonałem kilku drobnych zmian w Twoim html, dodając klasę „group” do <li>tagu grup Bank i Liability , co ułatwia ich identyfikację.

Dodałem również klasę „połączone” do podlist, które chcę, aby były wymienne, że jako przykład można mieć zarówno kompletne wymienne podelementy, jak i podelementy, które można sortować tylko w ramach własnej grupy. Ta klasa „połączona” jest używana w sortable()funkcji connectWithfunkcji, zobacz Listy połączeń

W przypadku, gdy grupa stanie się pusta, musisz zdefiniować minimalną wysokość, aby móc przenosić elementy z powrotem do tej pustej grupy.

następnie zmieniłem sortable na:

$(function() { $('li.group ul.sublist').sortable({

    });
    $('.hasItems ul.sublist').sortable({
            connectWith: ".connected"
    }).disableSelection();
});

który teraz pozwala na poruszanie się zgodnie z żądaniem.

sprawdź skrzypce, aby uzyskać szczegółowe informacje lub

$(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>