多个选择性可排序列表(1个主要和2个子)

Question

我还没有看到任何有选择性排序的例子:

[A:一个主列表]
[B:一个子列表]
[C:另一个子列表]

---

条件:

1. B和C可以转移到A.
2. A只能转移到B来自B的元素(同样适用于C)
3. B和C之间不能相互转移

---

示例结构:

<ul class="A"></ul>    
<ul class="B">
   <li class="child-B" />
   <li class="child-B" />
   <li class="child-B" />
</ul>
<ul class="C">
   <li class="child-C" />
   <li class="child-C" />
   <li class="child-C" />
</ul>

---

我已经尝试将sortable应用于列表并尝试动态改变connectWith(它们都可以连接到A),但没有运气.这是我的一次尝试(jsFiddle).我也尝试将'.master,.sub'作为初始connectWith,但它允许交叉共享.

我认为第二个循环是更新sortable的connectWith,所以我卡住了.有任何想法吗？

Answer 1

这是我第一次玩sortable(从jqueryui.com上读一下),但我认为这应该可以解决问题.您可以在以下jsFiddle中看到它的运行情况

HTML:

<ul class="master"></ul>

<ul class="sub a">
    <li class="a">Foo</li>
    <li class="a">Boo</li>
</ul>
<ul class="sub b">
    <li class="b">Bar</li>
    <li class="b">Baz</li>
</ul>

JQuery的:

$(document).ready(function(){

    // create sortables
    $( ".master,.sub" ).sortable({
       connectWith: ".master,.sub",
       revert: true,
       receive: function(event, ui) {

           // only perform for sub drop downs
           if ($(this).hasClass('sub'))
           {
               // if the item doesn't have the matching sub class
               if (!$(this).hasClass($(ui.item).attr('class')))
               {
                   // cancel the sortable
                   $(ui.sender).sortable('cancel');
               }
           }
       }
    }).disableSelection(); 
});

此示例基本上在接收项目时执行验证,如果未通过,则取消移动.

希望这是你正在寻找的.