限制JQuery用户界面的可排序）上嵌套列表

我已经创建的窗体的嵌套列表使用jQuery UI范围（...限制JQuery用户界面的可排序）上嵌套列表

<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>

我所做的名单排序，以便例如外部项1可可以嵌套在组1中，并且可以按任意顺序将外部项目和组排序在一起。我想要防止的是用户能够将一个组嵌套到另一个组中，同时仍然允许它被拖动到列表中的不同位置。它应该没有什么区别，但是这个列表是通过一个持有集合集合的外部模型在剃刀中生成的。（一个外部项目被存储为一个ID为空的GUID的组的成员）

简单地说，我该如何告诉一个具体类<li>永远不会将自己放在子列表中？或者我如何告诉孩子名单拒绝某些项目？

来源

2012-07-06 ReiMasuro

终于解决了（或看起来）那个谜语。））诀窍是分配一个自定义的.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中，它们仅用于调试目的）。

来源

2012-07-06 15:01:42 raina77ow

使用可分类的值为“parent”的包含选项应该可以实现此目的。

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

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

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

来源

2012-07-06 15:02:04 bstakes

感谢您尝试，但我需要能够得到的子元素出组，反之亦然 – ReiMasuro 2012-07-06 15:24:14

限制JQuery用户界面的可排序）上嵌套列表

回答

相关问题