# Drag and drop problem if Droppable zones overlap

**URL:** <https://www.ruby-forum.com/t/drag-and-drop-problem-if-droppable-zones-overlap/51130>\
**Category:** Rails\
**Created:** [December 27, 2005, 1:13am UTC](https://www.ruby-forum.com/t/drag-and-drop-problem-if-droppable-zones-overlap/51130 "2005-12-27T01:13:25Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![pmouawad](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/ee59a6/32.png) [@pmouawad](https://www.ruby-forum.com/u/pmouawad)\
**Post date:** [December 27, 2005, 1:13am UTC](https://www.ruby-forum.com/t/drag-and-drop-problem-if-droppable-zones-overlap/51130/1 "2005-12-27T01:13:25Z")

</div>

Hello,  
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  
for  
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.

---

<div class="post-metadata">

**Author:** ![pmouawad](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/ee59a6/32.png) [@pmouawad](https://www.ruby-forum.com/u/pmouawad)\
**Post date:** [December 27, 2005, 5:29pm UTC](https://www.ruby-forum.com/t/drag-and-drop-problem-if-droppable-zones-overlap/51130/2 "2005-12-27T17:29:55Z")

</div>

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.

Jason

---

<div class="post-metadata">

**Author:** ![pmouawad](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/ee59a6/32.png) [@pmouawad](https://www.ruby-forum.com/u/pmouawad)\
**Post date:** [December 27, 2005, 10:11pm UTC](https://www.ruby-forum.com/t/drag-and-drop-problem-if-droppable-zones-overlap/51130/3 "2005-12-27T22:11:51Z")

</div>

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