如何使用jQuerysorting时复制项目？

我使用这个方法http://jqueryui.com/demos/sortable/#connect-lists来连接两个我有。 我想能够从列表A拖到列表B，但是当项目被删除，我需要保持原来的一个仍然在列表A中。我检查了选项和事件，但我相信没有这样的事情。 任何方法？

Answer 1

一开始， 看看这个 ，并且阅读@Erez的答案。

$(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

埃雷兹的解决scheme为我工作，但我发现它缺乏封装令人沮丧。 我build议使用以下解决scheme来避免全局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); } }); 

这是一个jsFiddle： http : //jsfiddle.net/v265q/190/

Answer 4

我知道这已经很老了，但是我不能得到Erez的答案，Thorsten也没有为我所需要的项目而裁员。 这似乎正是我所需要的：

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

abuser2582707的答案最适合我。 除了一个错误：你需要改变返回

 return li.item.clone(); 

所以它应该是：

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

当使用Erez的解决scheme，但连接2个可sorting的portlet（基础是来自http://jqueryui.com/sortable/#portlets的portlet示例代码）时，克隆上的切换将不起作用。; 我在'return li.clone（）;'之前添加了以下行 使其工作。

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

这花了我一段时间才弄清楚，所以我希望它可以帮助别人。