使用 jquery sortable 时如何复制项目？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6940390/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I duplicate item when using jquery sortable?
提问by odle
I am using this method http://jqueryui.com/demos/sortable/#connect-liststo connect 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 keep the original one still in list A. I checked the options and events but I believe there is nothing like that. Any approaches?
我正在使用这种方法http://jqueryui.com/demos/sortable/#connect-lists来连接我拥有的两个列表。我希望能够从列表 A 拖动到列表 B，但是当项目被删除时，我需要将原始项目保留在列表 A 中。我检查了选项和事件，但我相信没有类似的东西。有什么办法吗？
采纳答案by Thorsten
For a beginning, have a look at this, and read @Erez answer, too.
首先，看看这个，并阅读@Erez 的回答。
$(function () {
$("#sortable1").sortable({
connectWith: ".connectedSortable",
remove: function (event, ui) {
ui.item.clone().appendTo('#sortable2');
$(this).sortable('cancel');
}
}).disableSelection();
$("#sortable2").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
回答by Erez
$("#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;
}
});
回答by Sean Anderson
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:
Erez 的解决方案对我有用，但我发现它缺乏封装令人沮丧。我建议使用以下解决方案来避免使用全局变量：
$("#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/
这是一个 jsFiddle：http: //jsfiddle.net/v265q/190/
回答by abuser2582707
I know this is old, but I could not get Erez's answer to work, and Thorsten's didn't cut it for the project I need it for. This seems to work exactly how I need:
我知道这很旧，但我无法得到 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();
回答by creativecat
The answer of abuser2582707 works best for me. Except one error: You need to change the return to
滥用者2582707的答案最适合我。除了一个错误：您需要将返回更改为
return li.item.clone();
So it 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();
回答by user1505746
When using Erez's solution but for connecting 2 sortable portlets (basis was the portlet example code from http://jqueryui.com/sortable/#portlets), the toggle on the clone would not work. I added the following line before 'return li.clone();' to make it work.
当使用 Erez 的解决方案但为了连接 2 个可排序的 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();
});
This took me a while to figure out so I hope it helps someone.
这花了我一段时间才弄明白，所以我希望它可以帮助某人。
