Drag and drop problem if Droppable zones overlap


The question is related to Droppables and Draggable.
I’m creating a splitter component with a DIV that acts as the splitter
and 2 DIV zones that are the splitted zone. To do so I use the
Droppables and Draggable in conjunction.
The splitter DIV is a Draggable component and I define 2 Droppable zones
the splitter DIV (Zone A and B on each side of the splitter)

It works fine if I define only one splitter.
But when I define 2 splitters, it breaks because Droppable Zone A’ of
the Horizontal splitter is inside Droppable Zone B of Vertical splitter.

                          Vertical Splitter

| | |
| | ZONE A’ |
| | |
| Zone A |--------ZONE B-----------------| H splitter
| | |
| | |
| | ZONE B’ |
| | |

I tried using options containment but I couldn’t make it work, I also
thought about accept but this makes me define a class for each splitter
which seams rather a bad design to me.
So the question is:
Is what I’m trying to do possible, if yes how ?

Thank you.


Hi Phillipe,

DISCLAIMER: I have never coded drag & drop. I’m approaching this from a
html/css angle. Here goes…

Have you tried using the zindex css property? zindex lets you define one
div to be on top of the other. I have no idea if this would work, but I
guessing that if you put Zone B on top of zone A then zone b would
receive the drop event instead of A. If this works, it would simply your
coding dramatically so that you only have two droppable regions.

Try this:

| |
| ZONE A |
| |
| Zone A |-------------------------------|
| | |
| | Zone A (underneath) |
| | ZONE B (on top w/zindex) |
| | |

Please let me know if this works.



Thank you for your answer.
In fact, I’m not sure I was clear about my problem, the problem was that
the right DIV zone was not notified of the Drag end since one DIV was
over the other.
I solved my problem by registering an observer to Draggables, and I test
in the callback that I’m concerned about the event, if so I resize the
div and It works.

But again, thank you for answering.