Skip to main content

Search and Top Navigation

#3452 closed feature (wontfix)

Opened September 18, 2008 10:37PM UTC

Closed October 12, 2010 02:52AM UTC

Last modified October 10, 2011 11:51AM UTC

Gestion of stacked droppable.

Reported by: Daazku Owned by: paul
Priority: major Milestone: 1.9.0
Component: ui.droppable Version: 1.6rc1
Keywords: Cc:
Blocked by: Blocking:

When we have some stacked droppable we must be able to choose how to handle the event. All droppable are affected? Only the top one (Z-index / DOM hirarchy)?

Currently we can't choose so all droppable execute the event.

(If we go further we can apply this concept to draggable. Chose to drag the top one or all the draggable under the mouse)

Attachments (0)
Change History (9)

Changed September 19, 2008 02:20AM UTC by scottgonzalez comment:1

priority: blockermajor

I don't feel that this is a blocker since it's possible to implement this as a user of the plugin by doing the checks on your own and using the start callbacks.

Changed March 16, 2009 08:58AM UTC by paul comment:2

resolution: → fixed
status: newclosed

This is already possible. For once, there's the greedy option that triggers the drop only on the most inner droppable you're over, but then, events also started to bubble, so you can now prevent the propagation.

Changed March 18, 2009 01:03AM UTC by scottgonzalez comment:3

milestone: TBD1.later
resolution: fixed
status: closedreopened

This isn't about nested droppables, it's about siblings that are positioned on top of each other.

Changed August 05, 2009 01:30AM UTC by scottgonzalez comment:4

milestone: 1.later1.8

Changed August 22, 2009 11:44AM UTC by paul comment:5

I don't think this is possible without significant overhead - you need to compare all positions of all droppables against all other droppables and find out if they're nested. I would prefer not to support this edge case.

Changed October 12, 2010 02:52AM UTC by scottgonzalez comment:6

resolution: → wontfix
status: reopenedclosed

Changed February 03, 2011 06:34PM UTC by randynwalsh comment:7

This was something I really wanted to do, so found a way to have nested (overlapping) DIV's catch the right drop. I did this by using the over and out events, and keeping track of them on a stack. Here's my code, hope it helps you.


activate: function (event, ui) {

$.hoverStack = []; // reset on start of a drag


over: function (event, ui) {

$.activeDrop = this;



out: function (event, ui) {


if ($.hoverStack.length) $.activeDrop = $.hoverStack[$.hoverStack.length - 1]; else $.activeDrop = null;


drop: function (event, ui) {

if (!$.activeDrop) $.activeDrop = this;

alert('Dropped on id: ' + $($.activeDrop).attr('id') + '<br />');



Changed August 15, 2011 12:14PM UTC by scottgonzalez comment:8

#7637 is a duplicate of this ticket.

Changed October 10, 2011 11:51AM UTC by scottgonzalez comment:9

#7776 is a duplicate of this ticket.