Question

我正在使用这个jquery可排序脚本（http://johnny.github.io/jquery-sortable/）的UI。我想有一个嵌套列表，我给用户能够从外层拖放到一个级别。我几乎在那里，但是嵌套没有限制，所以如果我们有

第一
第二
第三
所述

然后将它拖到

第一

3.third
第二
所述

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

第一

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

不应允许第二级第二级第二级。我在另一个插件中看到了（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;
    }

jquery-sortable - 限制嵌套级别

1 个答案: