Not draggable element inside Draggable 出错了

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 元素之后放置。

Not draggable element inside Draggable 出错了

Not draggable element inside Draggable one went wrong

javascript

jquery

drag-and-drop

draggable

jquery-ui-sortable