4

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

<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 可以嵌套在第一组中，并且外部项目和组可以按任何顺序一起排序。我要防止的是用户能够将一个组嵌套在另一个组中，同时仍然允许将其拖到列表中的不同位置。它不应该有任何区别，但是该列表是由一个包含组集合的外部模型在剃刀中生成的。（外部项目存储为组的成员，该组的 ID 为空 GUID）

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

4

2 回答 2

4

终于解决了（或者看起来）这个谜。)) 诀窍是分配一个自定义.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!
    }
}});

这是概念证明。通过正确使用标识符（在 jsfiddle 中它们仅用于调试目的），内部检查可能会变得更加简单。

于 2012-07-06T15:01:42.450 回答
0

使用带有“parent”值的 sortable 的包含选项应该可以完成此操作。

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

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

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

于 2012-07-06T15:02:04.573 回答