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

【问题标题】：jQueryUI sortable (with connected lists), draggable and droppable - issues with them all working togetherjQueryUI 可排序（带有连接列表）、可拖动和可放置 - 它们一起工作的问题
【发布时间】：2017-04-22 03:27:39
【问题描述】：

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

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

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

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

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

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

任何想法如何阻止#b 元素允许将其元素拖放到#c？

【问题讨论】：

我在这个链接里放了一个小例子：jsfiddle.net/3ng94wox
我仍然停留在这个问题上。有人有什么想法吗？

标签： jquery jquery-ui jquery-ui-sortable jquery-ui-draggable jquery-ui-droppable

【解决方案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>

【讨论】：