不可拖动元素内部可拖动元素出错了答案

【问题标题】：Not draggable element inside Draggable one went wrong不可拖动元素内部可拖动元素出错了
【发布时间】：2016-11-25 09:48:13
【问题描述】：

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

<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 拖到@ 下方987654328@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 结构的解决方案？

【问题讨论】：

最好将“添加项目”按钮放在可拖动的 div 之外。但是，如果您只想在 div 中添加“添加项目”按钮，则可以使用 CSS 将按钮的位置固定到 div 的底部。
是的，这就是我的解决方案，但是我的 TL 东西如果不修改 DOM 结构一定会更好......

标签： javascript jquery drag-and-drop draggable jquery-ui-sortable

【解决方案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 将纠正 drop 事件：避免在 drag-drop-disable 元素之后删除。

【讨论】：