jQuery draggable dropped on 2 droppables. only need one

Question

I'm having a little problem with some dragging and dropping with jQueryUI (most recent versions).

I've got a draggable, that isn't all that special. I've got 2 drop locations, but they are not parent-child.

The first droppable is right above the second one. The second droppable is inside a scrollable div. And the problem occurs when that div has scrolled down a bit. When the div has scrolled, the second droppable is effectively moved upwards, but this is hidden.

Using the element inspector in Chrome I can see it being highlighted.

Now when I drop a draggable on the first one, both droppables are fired, but I only want the first one to fire.

Using "greedy: true" does not seem to work, most likely because they are not parent-child.

The order in which they are fired is predictable. The first (visible droppable) is fired first, then the second (which you actually can't see).

Is there a way to prevent the second droppable to fire?

jsfiddle example

http://jsfiddle.net/vQuZf/1/

Answer 1

Having looked a bit further into it, I found there are currently 2 possible solutions:

1) move the elements on the page is such a way that no overlap exists anymore. This way you don't get a "double drop".

2) add some custom code in the droppable that is also run when dropped. This should mark the dropped element with a timestamp when it was last dropped. The other element can check this and if it was dropped within X seconds it should ignore the drop.

For solution 2 different implementations are possible, but they all would be similar in a sense the first should mark the dropped element so the second can check that.

In my case I went with solution number 1, as it is the nicest solution that turns out to be a better layout of the page anyway.