jQuery nested sortable, hard to sort

Question

I'm using the following code to create a nested sortable with jQuery:

http://jsfiddle.net/yPQZx/65/

It works, except for one thing that works kinda buggy.

Here are the steps to take:

1. Try to drag "Item 3" underneath "Item 2" so that "item 3" is a child of "Item 2".

2. Now try to move "Item 3" back on its original place.

You'll see that this is quite hard to do.

I was wondering if there's a solution for this problem. Because right now it's not really user friendly...

Answer 1

I have run into similar issues with sortable. In order to help the user place items, I generally add extra height to the placeholder that is created when dragging starts.

For your jsfiddle, you added the ui-state-highlight class to the placeholder. Just add the following to your style and try it out:

.ui-state-highlight {
  height: 2em;
}

I tried it out and it seems to work a little better that way. You can also try constraining sortable to the 'y' axis by passing axis: 'y' to see if you like that behavior.

Hope that helps!