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>