How to duplicate an element when using jquery collation?

Question

I use this method http://jqueryui.com/demos/sortable/#connect-lists to connect the two lists that I have. I want to be able to drag from list A to list B, but when the item is dropped, I need to save the source file back in list A. I checked the parameters and events, but I believe that there is nothing like this. Any approaches?

Answer 1

To get started, review this and read @Erez's answer as well.

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

Answer 2

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

Answer 3

Erez's solution works for me, but I found that its lack of encapsulation is frustrating. I would suggest using the following solution to avoid using global variables:

 $("#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 jsFiddle: http://jsfiddle.net/v265q/190/

Answer 4

I know this is old, but I couldn't get Erez to answer the job, and Torsten didn't cut it for the project I need. This is similar to how I need to:

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

Answer 5

Answer abuser2582707 works best for me. Except for one mistake: you need to change the return to

 return li.item.clone(); 

So this should be:

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

Answer 6

When using the Erez solution, but for connecting 2 sortable portlets (the example was the portlet code from http://jqueryui.com/sortable/#portlets ), the switch to the clone will not work. I added the following line before 'return li.clone ();' for it to work.

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

It took me a while to understand, so I hope this helps someone.