Question

我创建了一个表单的嵌套列表...

<ol>
    <li>Group One
        <ol>
            <li>Item1 in group one</li>
        </ol>
    </li>
    <li>Group Two
        <ol>
            <li>Item1 in group two</li>
        </ol>
    </li>
    <li>External Item 1</li>
    <li>External Item 2</li>
</ol>

使用Jquery UI我使列表可以排序，例如，外部项1可以嵌套在组1中，外部项和组可以按任何顺序排序。我想要防止的是用户能够将一个组嵌套在另一个组中，同时仍然允许它被拖动到列表中的不同位置。它应该没有任何区别，但是该列表是由持有组的外部模型在剃刀中生成的。（外部项目存储为具有空的GUID的组的成员）

简单地说，如何告诉特定类<li>不要将自己置于子列表中？或者如何告诉子列表拒绝某些项目？

Answer 1

终于解决了（或者看起来似乎）那个谜语。））诀窍是分配一个自定义.stop事件处理程序，其中检查两个条件：移动的元素是否是一个组，以及它的新位置是否在外层空间。它看起来像是：

$('ol').sortable({
  // to connect inner lists and outer list between themselves 
  connectWith: ".sortable",

  // to intercept a movement  
  stop: function(event, ui) {
    if (ui.item.children('ol').length         // if it's a group...
        && ! ui.item.parent('.outer').length) // but moved within another group
    {
        $(this).sortable('cancel');           // cancel the sorting!
    }
}});

这是proof of concept。正确使用标识符可能会使内部检查变得更加简单（在jsfiddle中它们仅用于调试目的）。

Answer 2

使用值为“parent”的sortable的containment选项可以实现此目的。

$( ".selector" ).sortable({ containment: 'parent' });

http://jqueryui.com/demos/sortable/#option-containment

http://jsfiddle.net/bstakes/kQDmZ/

在嵌套列表上限制JQuery UI sortable（）的范围

2 个答案: