#10113 open bug ()

Opened June 16, 2014 12:01PM UTC

Last modified September 01, 2014 10:32AM UTC

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:
Description

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

Here's a JSFiddle http://jsfiddle.net/tilwinjoy/U9k7d/ 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.

[[Image(http://i.stack.imgur.com/ME8D7.png)]]

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: http://stackoverflow.com/questions/24200248/jquery-ui-sortable-appending-to-wrong-target

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..! :)

Attachments (0)
Change History (6)

Changed June 16, 2014 01:28PM UTC by tj.vantoll comment:1

owner: → tj
status: new → pending

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: http://jsfiddle.net/tj_vantoll/YMnwU/ (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.

Thanks.

Changed June 16, 2014 02:29PM UTC by tj comment:2

_comment0: hi, thanks for the reply, here's an updates simplest jsfiddle , which has no custom code other than 3 console.log statements for debugging purpose - [http://jsfiddle.net/YMnwU/7/] 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're 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... → 1402929239269205
status: pending → new

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 - http://jsfiddle.net/YMnwU/7/ 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...

Changed June 16, 2014 06:42PM UTC by tj.vantoll comment:3

status: new → pending

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.

Changed June 17, 2014 06:06AM UTC by tj comment:4

status: pending → new

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.

Changed June 17, 2014 01:22PM UTC by tj.vantoll comment:5

status: new → open
summary: jQuery UI sortable appending to wrong target → Sortable: 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.

Changed September 01, 2014 10:32AM UTC by tj comment:6

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..!