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

我有三个元素：

#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

吗？

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

更新代码

JS:

HTML:

第1项（可接受）
第2项（可接受）
第3项（可接受）
第4项（可接受）
第5项（可接受）
第6项（可接受）
第7项（可接受）
第8项（可接受）


项目9
项目10
项目11
项目12
项目13
项目14
项目15
项目16

只有（可接受的）项目可在此处拖放

我在这个链接中列出了一个小例子：我仍然无法解决这个问题。有人有什么想法吗？

$( 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();
      }
  });
});

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