JqueryUI Sortable - 仅在子列表中移动项目的功能（第 3 个位置）

Question

我正在尝试使用可排序的 jquery 设置特定功能。我似乎很接近但遇到了一个问题。我只需要将子项目移至 3 级职位 - 在帐户类型下

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

我只希望子项目能够拖放到具有 class="hasItems" 的其他列表中

我应该仍然可以在其主容器“资产”中移动 AR、VZ、BANK。但我不应该能够将整个事情放到一个子列表中（这是我现在遇到的问题）。

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 和 Liability 组的 <li> 标记中，这使得它们更容易识别。

我还将“连接”类添加到我希望可互换的子列表中，作为一个示例，您可以同时拥有完整的可互换子项和子项，这些子项只能在它们自己的组中排序。此类“已连接”用于sortable() 函数connectWith 功能，请参阅Connect Lists

如果一个组变空，您需要定义一个最小高度才能将项目移回该空组。

然后我将可排序更改为：

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

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

现在允许您按要求移动。

查看fiddle了解详情或

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