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;
}
});
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();
});
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/