Question

我有一个问题需要你帮我解决。我有两个这样的名单。

<div id="1" class="item-list draggable">
   <div class="item drag-drop-able">itemA</div>
   <div class="item drag-drop-able">itemB</div>
   <div class="add-button drag-drop-disable">Add Item</div>
</div>

<div id="2" class="item-list draggable">
   <div class="item drag-drop-able">itemC</div>
   <div class="add-button drag-drop-disable">Add Item</div>
</div>

此处的问题是我将itemC拖至item-list id=1（但不要删除），然后将其移回item-list id=2：它＆可以将itemC拖到button Add item下方。这是奇怪的行为，我想这是因为item-list是draggable，因此当我们快速拖动元素时，它可能会允许拖动到drag-drop-disable元素下方。我正在使用jQuery库的可排序。

DOM看起来像：

<div id="1" class="item-list draggable">
   <div class="item drag-drop-able">itemA</div>
   <div class="item drag-drop-able">itemB</div>
   <div class="add-button drag-drop-disable">Add Item</div>
</div>

<div id="2" class="item-list draggable">
   <div class="add-button drag-drop-disable">Add Item</div>
   <div class="item drag-drop-able">itemC</div> <!-- incorrect -->
</div>

我当前的解决方案是将按钮放在item-list之外，它有效，但我想知道我们是否可以使用任何不需要修改DOM结构的解决方案？

Answer 1

更新：我发现自己解决了这种情况，没有将按钮移出包装器：在

之前添加一个空元素

代码如下：

<div id="1" class="item-list draggable">
    <div class="item drag-drop-able">itemA</div>
    <div class="item drag-drop-able">itemB</div>
    <div class="item-divider"></div> <!--magic is here-->
    <div class="add-button drag-drop-disable">Add Item</div>
</div>

在我看来，空div会纠正掉落事件：避免在drag-drop-disable元素之后掉落。

Draggable里面没有可拖动的元素出错了

1 个答案: