jQuery UI: Drag and clone from original div, but keep clones

Here is what I finally did that worked:

$(".box-clone").live('mouseover', function() {    $(this).draggable({         axis: 'y',        containment: 'html'    });});$(".box").draggable({     axis: 'y',    containment: 'html',    helper: 'clone',    stop: function(event, ui) {        $(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');    }});

If you're tring to move elements (say <li/>) from a #source <ul/> to a #destination <ul/>, and you'd like them to clone (as opposed to move), and still be sortable on the right, I found this solution:

$(function() {    $("#source li").draggable({        connectToSortable: '#destination',        helper: 'clone'    })    $("#destination").sortable();  });

I know it seems ultra simple, but it worked for me! :)

Here was his solution:

$(".box-clone").live('mouseover', function() {    $(this).draggable({         axis: 'y',        containment: 'html'    });});$(".box").draggable({     axis: 'y',    containment: 'html',    helper: 'clone'    stop: function(event, ui) {        $(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');    }});