Droppable: ability to have drop event fire once for overlapping droppable zones

[hyj1254]

hi,

Please visist ​http://jsbin.com/aqaka/edit , then the

problem will appear.

The key point is that the 2 DIVs set to be droppable are

overlapping,then the event of Dropping is triggered twice.

Thanks.

[silverj]

Possible fix. drop() will only be called for the elements with highest z-index

[silverj]

If there are overlapping droppables that are not nested (floating or absolute position), the bottom-most droppable would catch the draggable element. To fix this, the function isOnTop() was added and is used in _drop function. The isOnTop determines if the droppable is the top-most droppable. If it is not, then the draggable will not be accepted. The check is done after calling the "accept" function.

To determine the top-most droppable, all droppables that are intersecting with the draggable (the intersect function was used, similarly to how it's used for the "greedy" option) are checked and the one with highest z-index is declared as the top-most droppable. To use it, z-index properties must be added to relevant elements. Browsers use "auto" for missing z-index property - this is considered to be zero in the patch.

We added a configuration option for the functionality - acceptFallthrough. If set to true, the isOnTop check is skipped. The default value is set to false because in our opinion the droppable elements that are not visible (covered by other droppables) shoult not have the drop function executed.

[nxtwrld]

This fix created another minor problem: I have 2 droppables on top of each other. When I drag I hover above element 1, causing the activateClass to turn itself on. Then I hover on top of element 2 I drop the element causing the drop() to be triggered for element 2. However the activateClass from element 1 gets never turned off after finishing the drag/drop operation.