jQueryUIソート可能（接続リスト付き）、ドラッグ可能かつドロップ可能 - それらがすべて連動する問題

Question

私は3つの要素：#a,#bおよび#cを持っています。

#aおよび#bは、項目をある要素から別の要素にスワップするためにソート可能な関数を使用する主な要素です。

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

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

はしかし、私はまた、ではなく#bから#cに、#cに#aから要素をドロップ/ドラッグできるようにしたいです。私のコードでは、#bから#cにアイテムをドラッグできる問題が発生しています。

私はその要素をドラッグできるようにすることから #b要素を停止することができますどのように

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

すべてのアイデアは/ #cに下がっ：ここに私のドラッグ/ドロップコードはありますか？

Answer 1

あなたのフィドルを更新しました。

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