This question is all over SO, but no one seems to have had the same problem as I have.
When I do something like this
this happens because Sortable doesn't really know if you are above the nested
<li> or the one that contains it. One solution is to use a structure like this:
<ul> <li><div>Item 1</div> <ul> <li><div>Subitem 1</div></li> <li><div>Subitem 2</div></li> </ul> </li> <li><div>Item 2</div></li> <li><div>Item 3</div></li> </ul>
and set the option
toleranceElement: '> div'. I don't know why it isn't documented, but it's in there and it tells Sortable to take into consideration just the
<div> when calculating intersections.
In case you are interested, I recently developed a plugin which makes nested sorting easier, allowing to create new nested lists on the fly.