jQueryUI dragged item fires drop for each element that's behind the first droppable

Question

For demonstration I've created this fiddle: http://jsfiddle.net/Lxmr1n4p/4/

In a web game I have several layers that are positioned absolute and layered one above another. In those layers there are droppable elements.

In the fiddle I made a black div as a draggable element. If I drop it on the big midgrey drop target, it alerts correctly, that it dropped on layer 2.

But if I drop it on the dark grey area, it says that dropped on layer 2 and when I click okay it also alerts that it dropped on layer 1, which I don't want, since (beside that it lays behind item in layer 2), the item in layer 1 has nothing to do with this action, a complete layer is above it.

This is the layout:

<div class="layer1">
    <div class="r">
        <div class="item"></div>
    </div>    
</div>
<div class="layer2">
    <div class="r">
        <div class="item"></div>
    </div>
</div>

<div class="drag"></div>

div.r just makes a relative box.

And this is my javascript:

$(document).ready(function () {
    $('.layer1 .item').droppable({
        drop: function () {
            greedy: true,
            alert('dropped on item in layer 1');
        }
    });

    $('.layer2 .item').droppable({
        drop: function () {
            greedy: true,
            alert('dropped on item in layer 2');
        }
    });

    $('.drag').draggable({});
});

Is there a way to tell jqueryui that I only want the uppermost item to trigger the drop event? This example is not real game code, since it's way to big.

Have a look [here](https://forum.jquery.com/topic/two-overlapping-droppables-it-drops-on-the-underneath-droppable). I'm afraid this issue will never be fixed in the jQueryUI-core as this is a known bug with status "won't fix" — empiric, Dec 09 '14 at 14:23

score 1 · Answer 1 · answered Dec 09 '14 at 14:37

1

Hi you could disable the other dropable element(s) on hover:

over: function(event, ui){
      $( ".layer1 .item" ).droppable( "disable" )
},
out: function(event, ui){
     $( ".layer1 .item" ).droppable( "enable" )
 }

http://jsfiddle.net/Lxmr1n4p/5/

answered Dec 09 '14 at 14:37

Jeroen

1,991
2
16
32

This is no option, because i have hundreds of dynamically generated items. – Johannes Klauß Dec 09 '14 at 14:57
No possibility to give them all the same class and disable them at once (Except the one being hovered of course)? – Jeroen Dec 09 '14 at 15:03
So, `over` gets only triggered on the uppermost droppable? – Johannes Klauß Dec 09 '14 at 15:17
Yes because you disable the others, if you all give them a common class you could do something like: http://jsfiddle.net/Lxmr1n4p/6/ – Jeroen Dec 09 '14 at 15:25
Ok as a matter of fact this isnt working out when you hover the background first and go to the overlapping div directly – Jeroen Dec 09 '14 at 15:29
I think the main problem here is, that it seems to trigger the drop events in reverse, bottom to top. Is that a fact? – Johannes Klauß Dec 09 '14 at 15:33
1

No the fact is that layer 2 is on top of layer 1 and as long as you enter layer 2 first everyhting goes fine. If you enter layer 1 first the trick doenst work. Dit you looke trough the answers in this question: Someone claimed he made a plugin. – Jeroen Dec 09 '14 at 15:36
That doesn't help me out here, since the different layers are wrapped relative. So an Item with a z-Index of 40 can still be behind an item with z-Index of 20, if they are inside different layers. – Johannes Klauß Dec 11 '14 at 14:13
then you could modify this plugin (https://github.com/vaceta/jquery-top-droppable/blob/master/jquery.top-droppable.js) and check for stack order instead of zindex. Depending on your strucuture this could become complex, check out this answer for more info: http://stackoverflow.com/a/24572492/1537154 – Jeroen Dec 11 '14 at 14:47

jQueryUI dragged item fires drop for each element that's behind the first droppable

1 Answers1