jquery - 多个选择性可排序列表(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>

<小时/>

我尝试过将可排序应用于列表，并尝试随后动态更改 connectWith (它们都能够连接到 A)，但没有成功。这是我的尝试之一( jsFiddle )。我还尝试将“.master,.sub”作为初始 connectWith，但它允许交叉共享。

我认为第二个循环正在更新可排序的 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(); 
});

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

希望这是您正在寻找的内容。