jQuery UI Sortable and Draggable issues

Question

I have a nested Sortable which is not working quite well on it's own, but I've added a Draggable too, which is causing even more problems.

Sorting items between nested Sortables is almost impossible, try it ;)
Dragging a Draggable into the inner Sortable also adds a new item to the outer Sortable as well

Example: JSFiddle

I guess this is just impossible to achieve with the current version of jQuery UI.

Edit: see comment below

Can't test Chrome 12 since I've got 11, but is also seems to fail in Firefox 4, Opera 11 and Internet Explorer 9, tested on Windows 7 — Melvin
it is not impossible I have done it but with a little bit of an effort... hold up... — Val
It doesn't "fail" for me in Firefox 4.0.1 although I agree with your first point moving Item 1 in Container 2 to the end of Container 2 creates a weird effect and it's a nuisance to pin-point the drop point the item. — Gary Green
I´ve managed to resolve the second issue by only adding a Sortable instance to the outer container and changing the 'items' selector from '> .item' to '.item'. It is still a bit jumpy but that's probably related to the styling, as I'm not much of a designer, I'll search for a fix and update my post accordingly. Example: JSFiddle — Melvin

Val Val · Accepted Answer · 2011-06-06T08:40:53

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>
       <ul> <li>Item 4</li> </ul>
   </li>
</ul>

$('ul').bind('mouseenter',function (){
   //$(this).parents('ul').sortable('destroy');//this line is optional... :)
   $(this).sortable({'items':'li'});
});
$('ul').bind('mouseleave',function (){
   $(this).sortable('destroy');
});

this may not work as I have not tested it but you do get the idea I hope :)

jQuery UI Sortable and Draggable issues

1 Answers