JqueryUI Sortable-하위 목록 내 항목 만 이동하는 기능 (3 번째 위치)

Question

jquery sortable을 사용하여 특정 기능을 설정하려고합니다. 가까운 것 같지만 문제가 있습니다. 레벨 3 위치로만 이동하려면 하위 항목이 필요합니다-계정 유형에서

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

하위 항목 만 드래그하여 class = "hasItems"가있는 다른 목록으로 드롭 할 수 있기를 원합니다.

여전히 AR, VZ, BANK를 기본 컨테이너 "Asset"내에서 이동할 수 있어야합니다. 그러나 나는 모든 것을 하위 목록에 넣을 수 없어야합니다 (지금 내가 겪고있는 문제입니다).

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

솔루션이이 코드에있을 수 있다고 생각합니다.

<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

이동할 DOM 요소를보다 구체적으로 식별해야합니다.

먼저 html을 약간 변경하여 Bank and Liability<li> 그룹 의 태그에 "group"클래스를 추가하여 쉽게 식별 할 수 있도록했습니다.

또한 상호 교환이 가능한 하위 목록에 "connected"클래스를 추가했습니다. 예를 들어 상호 교환 가능한 하위 항목과 자체 그룹 내에서만 정렬 할 수있는 하위 항목을 모두 가질 수 있습니다. 이 클래스 "connected"는 sortable()함수 connectWith기능에 사용됩니다. 연결 목록 참조

그룹이 비어있는 경우 항목을 해당 빈 그룹으로 다시 이동할 수 있도록 최소 높이를 정의해야합니다.

그런 다음 정렬 가능을 다음과 같이 변경했습니다.

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

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

이제 요청한대로 이동할 수 있습니다.

자세한 내용 은 바이올린 을 확인 하거나

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