Sortable + nested lists with jQuery UI 1.8.2
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:
$(document).ready(function() { $('#sortable-category').sortable({ items: 'li', toleranceElement: '> div' });});* { box-sizing: border-box; list-style: none;}ul > li > div { margin-bottom: 5px; border-bottom: 1px solid #ddd;}ul,ul > li > div { display: block; width: 100%; float: left;}ul > li { display: block; width: 100%; margin-bottom: 5px; float: left; border: 1px solid #ddd;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><ul id="sortable-category"> <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.