Skip to main content

Search and Top Navigation

#6083 closed bug (notabug)

Opened September 20, 2010 04:52PM UTC

Closed September 20, 2010 05:32PM UTC

Last modified October 11, 2012 09:15PM UTC

Parent droppable takes precedence over dynamically created child droppable

Reported by: sslotsky Owned by:
Priority: minor Milestone:
Component: ui.droppable Version: 1.8.4
Keywords: Cc:
Blocked by: Blocking:

If a container div (known as container) is droppable and I dynamically create another div (known as emptyBox) and make emptyBox droppable, the drop event never fires for emptyBox, because the drop event for container is taking precedence. This container shows up in the list of droppables before any dynamically created droppable. As a result, the container is returned as the area in which to drop the draggable.

The droppable code should recognize that I'm trying to drop into emptyBox rather than container, but it does not, because container's drop event is taking precedence.

To see the problem in action:

1. Edit boxWidget.html and fix the reference to jQuery-ui (current reference is local) and open the file in your browser

2. Drag the colored boxes from the top into the 3 empty boxes shown in the container

3. Drag a 4th colored box from the top over the container, but not inside one of the boxes. (A new empty box will be generated, the container height will be adjusted, and your colored box will be appended to the empty box)

4. Remove the colored box you just added in step 3.

5. Drag one of the colored boxes form the first row inside the container into the empty box (the one we just emptied in step 4)

Expected result: The colored box that you just dragged into the empty box should remain in the empty box

Actual result: The colored box goes back to its original position. The 'absorbBox' function is called, indicating that the drop event for container was fired instead of the drop event for emptyBox.

Attachments (4)
  • BoxWidget.js (2.6 KB) - added by sslotsky September 20, 2010 05:04PM UTC.
  • boxWidget.html (1.5 KB) - added by sslotsky September 20, 2010 04:53PM UTC.
  • close-tab.png (0.9 KB) - added by sslotsky September 20, 2010 04:59PM UTC.
  • inactive-close-tab.png (0.9 KB) - added by sslotsky September 20, 2010 04:59PM UTC.
Change History (3)

Changed September 20, 2010 05:00PM UTC by sslotsky comment:1

Note: if you want to see the images which remove the colored boxes from their emptyBox containers, you will either have to fix the references to the image files in the stylesheet, or move the image files into a local folder with the same name as that which is references in the stylesheet.

Changed September 20, 2010 05:32PM UTC by scottgonzalez comment:2

resolution: → invalid
status: newclosed

Please provide a reduced test case. You may also want to look at the refreshPositions option for draggable.

Changed October 11, 2012 09:15PM UTC by scottgonzalez comment:3

milestone: TBD

Milestone TBD deleted