不可拖動的元素裏面Draggable出錯了

我有一個問題，需要你來幫我解決它。我有兩個這樣的名單。不可拖動的元素裏面Draggable出錯了

<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-listid=1（但不降），然後移回item-listid=2：有可能拖累itemC下buttonAdd 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結構？

來源

2016-11-25 Kai

最好將「添加項目」按鈕放在可拖動div外部。但是如果你想在你的div裏面添加項目按鈕，那麼你可以使用CSS將按鈕的位置固定到div的底部。 – jaybutani

是的，這是我的解決方案，但是如果不修改DOM結構，那麼我的TL必須更好。 – Kai

更新：我發現自己沒有移動的按鈕從包裝中的這種情況的解決方案：添加一個空元素之前

的代碼如下：

<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>

在我看來，在空格將糾正掉落事件：避免掉落drag-drop-disable元素之後。

來源

2016-11-28 18:21:32 Kai

不可拖動的元素裏面Draggable出錯了

回答

相關問題