How do I duplicate item when using jquery sortable?

$("#sortable1").sortable({    connectWith: ".connectedSortable",    forcePlaceholderSize: false,    helper: function (e, li) {        copyHelper = li.clone().insertAfter(li);        return li.clone();    },    stop: function () {        copyHelper && copyHelper.remove();    }});$(".connectedSortable").sortable({    receive: function (e, ui) {        copyHelper = null;    }});

Erez' solution works for me, but I found its lack of encapsulation frustrating. I'd propose using the following solution to avoid global variable usage:

$("#sortable1").sortable({    connectWith: ".connectedSortable",    helper: function (e, li) {        this.copyHelper = li.clone().insertAfter(li);        $(this).data('copied', false);        return li.clone();    },    stop: function () {        var copied = $(this).data('copied');        if (!copied) {            this.copyHelper.remove();        }        this.copyHelper = null;    }});$("#sortable2").sortable({    receive: function (e, ui) {        ui.sender.data('copied', true);    }});

Here's a jsFiddle: http://jsfiddle.net/v265q/190/

For a beginning, have a look at this, and read @Erez answer, too.

$(function () {    $("#sortable1").sortable({        connectWith: ".connectedSortable",        remove: function (event, ui) {            ui.item.clone().appendTo('#sortable2');            $(this).sortable('cancel');        }    }).disableSelection();    $("#sortable2").sortable({        connectWith: ".connectedSortable"    }).disableSelection();});