Sort added to the wrong target

Question

I have a sortable element whose children are also sortable.

Here's a JSFiddle demonstrating what I have so far.

In the violin or the image below the blue area #container, white squares .child, and a group of boxes marked with a black frame .parent.

#containerand .parentare sortable.

If an element is dragged and dropped from one .parentto another .parent, I just add the element (jQuery ui does this automatically). If element ( .child) is omitted in #container, I wrap it in a div .parentto mark it as the new parent.

Now, select prod3 by clicking on it, drag it to the left of prod5 before the placeholder appears to the left of prod5. drag prod3 down as much as possible while keeping the placeholder to the left of prod5, then lower it.

If jQuery UI detects this as falling inside .parentprod5, the expected result should look like this:

If it is detected as falling in #container, the expected result should be as follows:

Now what happens (seen from the logs in the console): the receive event is fired on #container, although the placeholder is inside .parent. I can handle this - but the problem is that even though the event receivewas fired on #container, the dragged item is prod3added to .parent, and to .parent! p>

- , #container, div .parent, .parent, prod5. , div .parent div .parent, , .

- , ? - ( )?

: , , .

: , , , jquery ui, . , #container, . ...

Answer 1

:

if (!ui.item.parent().hasClass('parent')){
     ui.item.wrap(parent).before(helper); 
}

, .parent div , parent .parent .ui-sortable, .ui-sortable, . , .

FIDDLE

Answer 2

, , .parent , .child , . , , , .parent, , , #container .child. , .child, , ​​ .child .

#container drop - !

JSFiddle, , .child .child, , . , ( ) , .

JQuery.

JQuery 2.0.2 JQuery 1.10.3, . , .