Droppables stop working after children change by drag and drop.
Hi,
I have a nested structure of unordered lists where all li-elements are
draggable and droppable, and all ul-elements are droppable. The
structure looks like this:
<ul class="level1_group">
<li class="level1">
<div>First level 1 item</div>
<ul class="level2_group">
<li class="level2">
<div>First level 2 item</div>
<ul class="level3_group">
<li class="level3"><div>First level 3 item</div></li>
<li class="level3"><div>Second level 3 item</div></li>
</ul>
</li>
<li class="level2">
<div>Second level 2 item</div>
<ul class="level3_group">
<li class="level3"><div>Third level 3 item</div></li>
<li class="level3"><div>Fourth level 3 item</div></li>
</ul>
</li>
</ul>
</li>
</ul>
The li-elements can only be dropped on either li-elements at the same
level or their parent ul-container.
Initially dragging and dropping works fine, but after dragging and
dropping a li-element I can no longer drop items on the li-*ancestors*
of the droppable. I.e. if I drag "Third level 3 item" on to "Second
level 3 item" I can no longer drop items on "First level 2 item". That
is, I cannot drop "Second level 2 item" on top of "First level 2
item". However the other way around works fine.
I have tried rebinding the draggable and droppable handlers on all
ancestors of the droppable after a drop, but that doesn't make any
difference.
Anybody have a suggestion to what the problem and (hopefully) the
solution might be?
Thanks,
Nils Chr.