¿Cómo duplico el artículo cuando uso jquery ordenable?

Estoy usando este método http://jqueryui.com/demos/sortable/#connect-lists para conectar dos listas que tengo. Quiero ser capaz de arrastrar desde la lista A a la lista B, pero cuando se suelta, necesito mantener la original en la lista A. Revisé las opciones y los eventos, pero creo que no hay nada como eso. ¿Algún acercamiento?

Para empezar, eche un vistazo a esto y lea la respuesta de @Erez también.

$(function () { $("#sortable1").sortable({ connectWith: ".connectedSortable", remove: function (event, ui) { ui.item.clone().appendTo('#sortable2'); $(this).sortable('cancel'); } }).disableSelection(); $("#sortable2").sortable({ connectWith: ".connectedSortable" }).disableSelection(); }); 
 $("#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; } }); 

La solución de Erez funciona para mí, pero me pareció frustrante su falta de encapsulación. Propondría usar la siguiente solución para evitar el uso de variables globales:

 $("#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); } }); 

Aquí hay un jsFiddle: http://jsfiddle.net/v265q/190/

Sé que esto es viejo, pero no pude obtener la respuesta de Erez para trabajar, y Thorsten no lo cortó para el proyecto en el que lo necesito. Esto parece funcionar exactamente como lo necesito:

 $("#sortable2, #sortable1").sortable({ connectWith: ".connectedSortable", remove: function (e, li) { copyHelper = li.item.clone().insertAfter(li.item); $(this).sortable('cancel'); return li.clone(); } }).disableSelection(); 

La respuesta de abuser2582707 funciona mejor para mí. Excepto un error: debe cambiar el retorno a

 return li.item.clone(); 

Entonces debería ser:

 $("#sortable2, #sortable1").sortable({ connectWith: ".connectedSortable", remove: function (e, li) { li.item.clone().insertAfter(li.item); $(this).sortable('cancel'); return li.item.clone(); } }).disableSelection(); 

Cuando se usa la solución de Erez pero para conectar 2 portlets que se pueden ordenar (la base era el código de ejemplo del portlet de http://jqueryui.com/sortable/#portlets ), el alternar en el clon no funcionaría. Agregué la siguiente línea antes de ‘devolver li.clone ();’ para hacer que funcione

 copyHelper.click(function () { var icon = $(this); icon.toggleClass("ui-icon-minusthick ui-icon-plusthick"); icon.closest(".portlet").find(".portlet-content").toggle(); }); 

Esto me llevó un tiempo averiguarlo, así que espero que ayude a alguien.