jQueryUI可排序（带连接列表），可拖动和可放置 - 与它们一起工作的问题

Question

我有三个元素：#a,#b和#c。

#a和#b是我使用可排序函数来将项目从一个元素交换到另一个元素的主要元素。

$("#a").sortable({ 
    connectWith: "#b", 
}); 

$("#b").sortable({ 
    connectWith: "#a", 
}); 

不过，我也希望能够拖动/元素从下降到#a#c，但不能从#b到#c。我遇到了一个问题，我的代码允许我将任何项目从#b拖到#c。这是我拖/放代码：

$("#a").draggable(); 
$("#c").droppable(); 

任何想法如何，我可以允许它的元素被拖动停止#b元/下降到#c？

Answer 1

我已经更新了你的小提琴。这里是工作DEMO

更新代码

JS：

$(function() { 
    $("#a, #b, #c").sortable({ 
     connectWith: ".connectedSortable", 
    }); 

    //$("#a").draggable(); 
    $("#c").droppable({ 
    accept: ".acceptable", 
    drop: function (e, ui) { 
     var dropped = ui.draggable; 
     var droppedOn = $(this); 
       $(this).append(dropped.clone().removeAttr('style').removeClass("item").addClass("item-container")); 
      dropped.remove(); 
     } 
    }); 
}); 

HTML：

<ul id="a" class="connectedSortable"> 
    <li class="acceptable">Item 1 (acceptable)</li> 
    <li class="acceptable">Item 2 (acceptable)</li> 
    <li class="acceptable">Item 3 (acceptable)</li> 
    <li class="acceptable">Item 4 (acceptable)</li> 
    <li class="acceptable">Item 5 (acceptable)</li> 
    <li class="acceptable">Item 6 (acceptable)</li> 
    <li class="acceptable">Item 7 (acceptable)</li> 
    <li class="acceptable">Item 8 (acceptable)</li> 
</ul> 

<ul id="b" class="connectedSortable"> 
    <li>Item 9</li> 
    <li>Item 10</li> 
    <li>Item 11</li> 
    <li>Item 12</li> 
    <li>Item 13</li> 
    <li>Item 14</li> 
    <li>Item 15</li> 
    <li>Item 16</li> 
</ul> 

Only (acceptable) items are droppable here 
<ul id="c"> 
</ul>