Opened 4 years ago

Last modified 4 years ago

#10113 open bug

Sortable: Discrepancy between receive event and appending with nested sortables

Reported by: tj Owned by: tj
Priority: minor Milestone: none
Component: ui.sortable Version: 1.10.4
Keywords: Cc:
Blocked by: Blocking:


I'm jqueryui sortable components. I've a sortable container element whose children are also sortable.

Here's a JSFiddle demonstrating what I've got so far. (most of the code in the fiddle is simply console.logs for detecting the events and set up of sortables) In the fiddle or image below, the blue area is #container, white boxes are .child and group of such boxes marked with a black border is .parent.

#container and .parent are sortables.

What's happening is that, if we drop an innermost child item partially between an inner sortable element (.parent) and outermost sortable (#container), a receive event is triggered on the outermost sortable (#container), but the item is actually being appended to the inner sortable (.parent). this is creating chaos!.

Following the a StackOverflow question describing the issue in a much better way:

If you've followed the instruction in the question and is able to reproduce the scenario - What i expect is the receive event of the inner sortable (div.parent in fiddle) is triggered and item is append in it (since placeholder appeared in it).

Currently the receive event attached to outermost sortable (div#container in fiddle) is triggered even though item is appended to div.parent where the placeholder was.

As you can see in jsfiddle the version i'm using is query ui 1.9.2 , i've tested it also in 1.10.3

I've tested it in latest version of google chrome in windows 8.1, and safari 6.1.4 in mac os x 10.7.5. I hope i've provided enough information to reproduce the issue and you guys can fix this..! :)

Change History (6)

comment:1 Changed 4 years ago by tj.vantoll

Owner: set to tj
Status: newpending

HI tj,

Thanks for taking the time to contribute to jQuery UI. As is, it's really hard to figure out what's going on in your test case because of the sheer amount of code. Could you take some time to remove any unnecessary code from your test case (options, CSS, logging, etc)? Basically we need to see the least amount of code that shows the issue you're experiencing.

Please use the latest version of jQuery UI. You can start with this jsFiddle: (which uses the latest version).

There are a few existing issues with nested sortables that might be related to this, but I'm not sure. See #6075 and #9582.


comment:2 Changed 4 years ago by tj

Status: pendingnew

hi, thanks for the reply, here's an updated simplest jsfiddle , which has no custom code other than 3 console.log statements for debugging purpose - in the fiddle, drag an item from first group to the second group, drag it down as much as possible while keeping the placeholder visible and drop it. check the console, you'll see that the remove event is fired from .parent and a receive event is fired on #container even though we dropped the item to another .parent...

Last edited 4 years ago by tj (previous) (diff)

comment:3 Changed 4 years ago by tj.vantoll

Status: newpending

Thanks, that test case helps a lot. Can you explain why the connectWith option for the .parent sortables includes #container? If I remove that the problem goes away, and it seems like a strange thing to do.

comment:4 Changed 4 years ago by tj

Status: pendingnew

Because as per requirement, an item can be either moved to another parent or the container. so i've specified connectWith both .parent and #container … thanks.

comment:5 Changed 4 years ago by tj.vantoll

Status: newopen
Summary: jQuery UI sortable appending to wrong targetSortable: Discrepancy between receive event and appending with nested sortables

Thanks for working through this we me. It takes some time to understand some of these interaction issues. I see the the receive event is fired on a different sortable than the element is appended to.

comment:6 Changed 4 years ago by tj

The receive is triggered on one element, and the item is being appended to some other element. I wonder why this is left as minor issue..!

Note: See TracTickets for help on using tickets.