jquery-sortable - 限制嵌套层数

Question

我正在开发一个 UI，它将使用这个 jquery 可排序脚本 (http://johnny.github.io/jquery-sortable/)。我想要一个嵌套列表，我让用户能够从外部级别拖放到其中的一个级别。我快到了，但是嵌套没有限制所以如果我们有

先
秒
第三
第四

然后他们将其拖到

第一

3.third
秒
第四

这是正确的，但我不希望他们能够进行第三级缩进，所以这是不允许的：

第一

3.third
```
    2. second
```
4.fourth

第 2 级缩进是不允许的。我在另一个插件中看到（nestedSortable - 它有其他限制，所以我没有使用它，我看到它有嵌套限制）但我没有在 jquery-sortable

中看到该限制

列表是通过 ajax 和用户选择的文本动态创建的，每次他们添加名称时，我都会添加一个列表项，它也会得到一个

     <ol></ol>

已添加，以便它可以成为容器。这是必需的，以便我可以允许将任何名称拖到另一个名称下。我不知道他们是否想将其添加为父项或子项，所以我总是将额外的空有序列表标签添加到列表项中。

举个例子：

<ol id="people" class="serialization vertical" name="people">
<li id="p0" data-id="p0" data-name="Hillary Clinton">
Hillary Clinton  
   <ol>
      <li id="p6" class="" data-id="p6" data-name="Hillary"><ol></ol>
   </ol>
</li>
<li id="p1" data-id="p1" data-name="Indra Nooyi">
Indra Nooyi   
 <ol>
   <li id="p3" class="" data-id="p3" data-name="Indra"><ol></ol>
   <li id="p5" class="" data-id="p5" data-name="Nooyi"><ol></ol>
 </ol>
</li>
<li id="p7" class="" data-id="p7" data-name="Clinton"><ol></ol>
</ol>

定义可排序列表的Javascript很简单就是：

var people_group = $('#people_ol.serialization').sortable({
      group: 'people_trash',     
});

组的原因是让人们把垃圾。

当用户将新人添加到列表时，javascript 这样做是：

    $('#people_ol').append("<li data-id='p"+person_index+"'   data-name='"+add_text+"' id='p"+person_index+"' >"+add_text <ol></ol></li>");

我想让他们将克林顿转移到希拉里的领导下，但我不希望他们能够将克林顿转移到希拉里的领导下（那将是第三级）——但这并没有被阻止，我希望它能够是。

有没有人做过这样的事情？

谢谢

Answer 1

我找到了这个问题的答案。如果有人正在寻找解决方案，我会post。

这是在 jquery-sortable 中实现嵌套限制的方法：

  isValidTarget: function ($item, container) {
        var depth = 1, // Start with a depth of one (the element itself)
            maxDepth = 2,
            children = $item.find('ol').first().find('li');

        // Add the amount of parents to the depth
        depth += container.el.parents('ol').length;

        // Increment the depth for each time a child
        while (children.length) {
            depth++;
            children = children.find('ol').first().find('li');
        }

        return depth <= maxDepth;
    }

jquery-sortable - 限制嵌套层数

jquery-sortable - limit nesting level

jquery

jquery-ui-sortable