Javascript NestableJS-仅允许拖放第三位置的项目

我正在尝试使用nestableJS插件创建一个自定义的可嵌套项目列表。但是，我需要的项目，只有在位置3下降

- Classification1
  - Account1
    -- itemx1
    -- itemx2
    -- itemx3
  - Account2
    -- itemx12
    -- itemx22
    -- itemx32
- Classification2
  - Account11
    -- itemx14
    -- itemx24
    -- itemx34
  - Account22
    -- itemx124
    -- itemx224
    -- itemx324

我需要能够在每个分类中更改分类顺序和账户顺序

然而，这些项目可以从任何分类进入任何账户。我可以；我似乎不能拥有这个功能。但是现在-我可以将项目拖放到与分类或帐户相同的位置

任何帮助都将不胜感激

我尝试的是：

<div class="cf nestable-lists">

        <div class="dd" id="nestable">
            <ol class="dd-list">
                <li class="dd-item" data-id="1">
                    <div class="dd-handle drag_disabled">Item 1</div>
                </li>
                <li class="dd-item" data-id="2">
                    <div class="dd-handle drag_disabled">Item 2</div>
                    <ol class="dd-list">
                        <li class="dd-item" data-id="3"><div class="dd-handle">Item 3</div></li>
                        <li class="dd-item" data-id="4"><div class="dd-handle drag_disabled">Item 4</div></li>
                        <li class="dd-item" data-id="5">
                            <div class="dd-handle drag_disabled">Item 5</div>
                            <ol class="dd-list">
                                <li class="dd-item" data-id="6"><div class="dd-handle">Item 6</div></li>
                                <li class="dd-item" data-id="7"><div class="dd-handle">Item 7</div></li>
                                <li class="dd-item" data-id="8"><div class="dd-handle">Item 8</div></li>
                            </ol>
                        </li>
                        <li class="dd-item" data-id="9"><div class="dd-handle">Item 9</div></li>
                        <li class="dd-item" data-id="10"><div class="dd-handle">Item 10</div></li>
                    </ol>
                </li>
                <li class="dd-item no-drag" data-id="11">
                    <div class="dd-handle">Item 11</div>
                </li>
                <li class="dd-item no-drag" data-id="12">
                    <div class="dd-handle">Item 12</div>
                </li>
            </ol>
        </div>

        <div class="dd" id="nestable2">
            <ol class="dd-list">
                <li class="dd-item" data-id="13">
                    <div class="dd-handle">Item 13</div>
                </li>
                <li class="dd-item" data-id="14">
                    <div class="dd-handle">Item 14</div>
                </li>
                <li class="dd-item" data-id="15">
                    <div class="dd-handle">Item 15</div>
                    <ol class="dd-list">
                        <li class="dd-item" data-id="16"><div id="dep3" class="dd-handle">Item 16</div></li>
                        <li class="dd-item" data-id="17"><div class="dd-handle">Item 17</div></li>
                        <li class="dd-item" data-id="18"><div class="dd-handle">Item 18</div></li>
                    </ol>
                </li>
            </ol>
        </div>

    </div>


<script>

$('.dep3').nestable({maxDepth: 1});

</script>

<script>

$(document).ready(function()
{

    var updateOutput = function(e)
    {
        var list   = e.length ? e : $(e.target),
            output = list.data('output');
        if (window.JSON) {
            output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
        } else {
            output.val('JSON browser support required for this demo.');
        }
    };

    // activate Nestable for list 1
    $('#nestable').nestable({
        group: 1
    })
    .on('change', updateOutput);

    // activate Nestable for list 2
    $('#nestable2').nestable({
        group: 1
    })
    .on('change', updateOutput);

    // output initial serialised data
    updateOutput($('#nestable').data('output', $('#nestable-output')));
    updateOutput($('#nestable2').data('output', $('#nestable2-output')));

    $('#nestable-menu').on('click', function(e)
    {
        var target = $(e.target),
            action = target.data('action');
        if (action === 'expand-all') {
            $('.dd').nestable('expandAll');
        }
        if (action === 'collapse-all') {
            $('.dd').nestable('collapseAll');
        }
    });

    $('#nestable3').nestable();

});
</script>

项目1


项目2
第3项
第4项

项目5
第6项
第7项
第8项

第9项
第10项

数据id=“11”>
项目11

数据id=“12”>
项目12


项目13


项目14


项目15
第16项
第17项
第18项

$（'.dep3'）.nestable（{maxDepth:1}）；
$（文档）.ready（函数（）
{
var updateOutput=函数（e）
{
变量列表=e.length？e:$（e.target），
输出=列表数据（“输出”）；
if（window.JSON）{
val（window.JSON.stringify（list.nestable（'serialize'））；/，null，2））；
}否则{
val（'此演示需要JSON浏览器支持'）；
}
};
//激活列表1的可嵌套项
$（“#可嵌套”）。可嵌套({
组别:1
})
.on（“更改”，更新输出）；
//激活列表2的可嵌套项
$（'#nestable2'）。nestable({
组别:1
})
.on（“更改”，更新输出）；
//输出初始序列化数据
updateOutput（$（'#可嵌套'）.data（'output'，$（'#可嵌套输出'））；
updateOutput（$（'nestable2'）.data（'output'，$（'nestable2 output'））；
$（“#可嵌套菜单”）。在（'click'，函数（e）上
{
var目标=$（即目标），
动作=目标数据（“动作”）；
如果（操作==='全部展开'）{
$（'.dd'）.nestable（'expandAll'）；
}
如果（操作===“全部折叠”）{
$（'.dd'）.nestable（'collapseAll'）；
}
});
$（'#nestable3'）.nestable（）；
});