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

Question

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

#a 和 #b 是我使用 sortable 函数的主要元素，以便将项目从一个元素交换到另一个元素。

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

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

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

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

有什么想法可以阻止 #b 元素允许其元素 dragged/dropped 到 #c 吗？

Answer 1

我已经更新了你的fiddle。这是工作 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>