Not draggable element inside Draggable one went wrong

Question

I've a problem that need you to help me to solve it. I've two list like this.

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

The issue here is when I drag itemC to item-list id=1 (but do not drop), then move it back to item-list id=2: it's possible to drag the itemC below the button Add item. it's weird behavior, I guess that is because the item-list is draggable, so when we drag element quickly, it may allow to drag below the drag-drop-disable element. I'm using the sortable of jQuery library.

The DOM is look like:

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

My current solution is put the button outside the item-list, it worked but I wonder if we could have any solution that no need to modify the DOM structure?

Answer 1

update: I found myself solution for this case without move the button out of its wrapper: Add a empty element before

The code will look like:

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

In my opinion, the empty div will correct the drop event: avoid dropping after the drag-drop-disable element.