Jquery Drag and Drop in nested lists - how to minimise / remove the flicker

Question

Based on http://jqueryui.com/demos/sortable/#placeholder I am working on a drag and drop interface that allows the user to reorganise nested lists. As you can see from the link this works great on simple lists.

However, when I try it with nested lists, I get quite bad flickering. Try it for yourself at:

http://jsfiddle.net/unklefolk/G5xPE/

After moving some inner items to the outer list and visa-versa you will see that there is quite a bit of flickering / dithering happening, particularly around the point where an outer list meets and inner list.

What can I do to minimise this flickering? Are there any change to the jQuery or CSS that I can make that would reduce this problem?

Answer 1

Take a look at this nested sortable plugin. It is list item driven, but it may be the answer to your issue.

nestedSortable jQuery Plugin

Answer 2

Usually i use helper: 'clone' wich has some impact on this problem (never understood why).i don't know if it works, on my firefox 8 looks better

$(function() {
    $( ".sortable" ).sortable({
        placeholder: "ui-state-highlight",
        connectWith: ".sortable",
         helper: 'clone'
    });
    $( ".sortable" ).disableSelection();
});

http://jsfiddle.net/nicolapeluchetti/G5xPE/17/