jQuery sortables - connect problem

I have two examples on jsFiddle:

Example 1

In the first one I can move the list elements around, even from a child element to the root element. However, it's not very easy to make it "snap".

Example 2

In the second example I have floated the list elements. This time I can't get them to "snap" to the child elements.

Questions

Is there a good way to make it easier to snap?
How do I solve it with float?

Solution

There is a so far undocumented option in jQuery sortable to define the element against which tolerance is checked: toleranceElement. If not set, the whole item is checked for placement (including the nested list), but if it's set, only sub-items matching the selector are taken into account.

This means you have to change your HTML markup a bit to wrap the main content of the list item (the item text in your case) in an element and use that to check for sort positioning. That will leave out the nested <ul>s, effectively stopping jittering which is otherwise quite serious.

HTML:

<div id="example5"> 
    <ul> 
        <li ><div>Item 1</div>
            <ul> 
                <li ><div>Item 1 1</div><ul></ul></li> 
                <li ><div>Item 1 2</div><ul></ul></li> 
                <li ><div>Item 1 3</div><ul></ul></li> 
            </ul> 
        </li> 
        <li ><div>Item 2</div><ul></ul></li> 
        <li ><div>Item 3</div><ul></ul></li> 
        <li ><div>Item 4</div><ul></ul></li> 
    </ul> 
</div>

Javascript:

$("#example5 ul").sortable({
    connectWith: "#example5 ul",
    placeholder: "ui-state-highlight",
    toleranceElement: 'div'
});

Try your modified demos here and here.

You might also want to play with opacity, cursorAt and tolerance. Have a look at the documentation.

Note that it's not a perfect solution, in case you're not satisfied with the results, have a look at using a plugin. Manuele J Sarfatti's nestedSortable plugin looks like something that might be of use for you: http://mjsarfatti.com/sandbox/nestedSortable/