Jquery 多个选择性可排序列表（1个主列表和2个子列表）

我没有看到任何选择性排序的示例：

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

---

条件：

B和C可以转移到A

A只能向B传输来自B的元素（同样适用于C）

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（它们都可以连接到），但没有成功。下面是我的一个尝试（）。我还尝试将“.master、.sub”作为最初的connectWith，但它允许交叉共享

---

我认为第二个循环正在更新排序表的connectWith，所以我被卡住了。有什么想法吗？

这是我第一次尝试使用可排序的

（从jqueryui.com上读了一点），但我认为这应该可以奏效。您可以在以下位置看到它的作用

HTML:

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

---

希望这就是你要找的。

这是我第一次使用可排序的

（从jqueryui.com上读了一点），但我认为这应该可以解决问题。您可以在以下位置看到它的作用

HTML:

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

---

希望这就是你想要的。

如果在

receive

事件中有一种方法可以拒绝某个项目，那就太好了，但是似乎没有一种内置的方法可以拒绝。@James:cancel不是这样做的吗？@JeffB我读到的所有信息都说它在receive中不起作用。我想我应该测试一下，因为从戈兰的回答来看，它确实完全符合我的要求。一个大的丑陋的动画，但功能。@JamesMontagne我同意。我读了文档，听到了一些相同的事情，也许有浏览器的错误，但戈兰的答案到目前为止对我有效。这就是为什么我最初尝试执行connectWith，而不是取消，如果列表不正确，它将永远不会启动。如果有一种方法可以在

receive

事件中拒绝某个项目，那就太好了，但似乎并没有一种内置的方式来做到这一点。@James:这不是cancel的功能吗？@JeffB我读到的所有东西都说它在receive中不起作用。我想我应该测试一下，因为从戈兰的回答来看，它确实完全符合我的要求。一个大的丑陋的动画，但功能。@JamesMontagne我同意。我读了文档，听到了一些相同的事情，也许有浏览器的错误，但戈兰的答案到目前为止对我有效。这就是为什么我最初尝试使用connectWith，而不是取消，如果列表不正确，它将永远不会启动。这肯定会起作用-仍然很奇怪，如果connectWith什么都不做，为什么会有一个setter。我想做的另一件事是提前进行验证。看起来动画试图把它放在适当的位置，然后一旦它稳定下来，它就决定不去那里。在它试图解决之前，它应该知道它不应该去那里。我可以告诉你为什么，那天早些时候我碰巧读了一点jqueryui。根据，connectWith属性仅应用于排序表，而不应用于排序表中的单个项，因此需要某种形式的自定义验证。你也许可以尝试摆弄链接上列出的其他事件，但是

receive

是我能找到的最好的。这是一个很好的发现。通常，我会进入基本代码，检查发生了什么，或者修改、替换或添加插件；但是我没有时间，所以我很感激额外的眼睛和帮助。那肯定会有用的。我仍然很好奇为什么会有一个setter来连接，如果它没有任何作用的话。我想做的另一件事是提前进行验证。看起来动画试图把它放在适当的位置，然后一旦它稳定下来，它就决定不去那里。在它试图解决之前，它应该知道它不应该去那里。我可以告诉你为什么，那天早些时候我碰巧读了一点jqueryui。根据，connectWith属性仅应用于排序表，而不应用于排序表中的单个项，因此需要某种形式的自定义验证。你也许可以尝试摆弄链接上列出的其他事件，但是

receive

是我能找到的最好的。这是一个很好的发现。通常，我会进入基本代码，检查发生了什么，或者修改、替换或添加插件；但是我没有时间，所以我感谢你的帮助。

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

$(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(); 
});