Question

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

[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（它们都可以连接到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(); 
});

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

希望这就是你要找的东西。

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

1 个答案: