多个选择性可排序列表（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(); 
});

这个例子基本上是在接收到item时进行验证，如果不通过就取消移动。

希望它是您正在寻找的。​​p>