ドラッグ可能な要素内にドラッグ可能なものがありません

Question

私はそれを解決するためにあなたを助けなければならない問題があります。私はこのような2つのリストを持っています。私はitemCid=1item-listにドラッグします（ただし、ドロップしない）、その後、バックitem-listid=2にそれを移動するとき

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

ここでの問題は、次のとおりです。それはitemCbuttonAdd 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要素の後にドロップしないようにしてください。