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>

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

1 个答案: