Opened 7 years ago

Closed 7 years ago

Last modified 5 years ago

#6083 closed bug (notabug)

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:

Description

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.html (1.5 KB) - added by sslotsky 7 years ago.
inactive-close-tab.png (957 bytes) - added by sslotsky 7 years ago.
close-tab.png (948 bytes) - added by sslotsky 7 years ago.
BoxWidget.js (2.6 KB) - added by sslotsky 7 years ago.

Download all attachments as: .zip

Change History (7)

Changed 7 years ago by sslotsky

Attachment: boxWidget.html added

Changed 7 years ago by sslotsky

Attachment: inactive-close-tab.png added

Changed 7 years ago by sslotsky

Attachment: close-tab.png added

comment:1 Changed 7 years ago by sslotsky

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 7 years ago by sslotsky

Attachment: BoxWidget.js added

comment:2 Changed 7 years ago by Scott González

Resolution: invalid
Status: newclosed

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

comment:3 Changed 5 years ago by Scott González

Milestone: TBD

Milestone TBD deleted

Note: See TracTickets for help on using tickets.