jquery-sortable - 限制嵌套级别

Question

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

1. 第一个

2. 第二个

3. 第三

4. 第四

然后他们将其拖到

1. 第一个

   3.第三

2. 第二个

3. 第四

这是正确的，但我不希望他们能够进行第三级缩进，因此这是不允许的:

1. 第一个

   3.第三

       2. second
   

   4.第四

不应允许第二个缩进，即第三级缩进。我在另一个插件中看到(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

我找到了这个问题的答案。如果其他人正在寻找解决方案，我会发布。

这是如何在 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;
    }