jquery-sortable - 限制嵌套级别

Question

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

1. 第一

2. 秒

3. 第三

4. 第四次

然后他们把它拖到

1. 第一

   3.第三

2. 秒

3. 第四次

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

1. 第一

   3.第三

       2. second
   

   4.第四

不应允许第 3 级缩进的 2. second。我在另一个插件中看到（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;
    }