Javascript jQuery UI 可排序：移动克隆但保持原始
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14199681/
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
jQuery UI sortable: Move clone but keep original
提问by adamb
Right now I have a column of elements and I have it to the point where where I drag, it clones but when I drop, it removes the original as well.
现在我有一列元素，我把它拖到我拖动的地方，它会克隆，但是当我放下时，它也会删除原始元素。
$( ".column" ).sortable({
helper: 'clone',
connectWith: ".column",
connectWith: ".grid",
start: function(e, ui){
ui.placeholder.height(ui.item.height());
$(".column" ).find('.portlet:hidden').show()
console.log('started')
},
stop: function(event, ui) {
$(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
}
});
How can I keep the original where its at (without re-appending it to the column) and have the clone move to the desired location?
如何将原始文件保留在原处（无需将其重新附加到列中）并使克隆移动到所需位置？
回答by adamb
Use $(this).sortable('cancel')inside the stop event handler to revert the item back to it's original list/position. http://api.jqueryui.com/sortable/#method-cancel
用$(this).sortable('cancel')停止事件处理程序内恢复的项目回到它的原始列表/位置。http://api.jqueryui.com/sortable/#method-cancel
$( ".column" ).sortable({
helper: 'clone',
connectWith: ".column",
connectWith: ".grid",
start: function(e, ui){
ui.placeholder.height(ui.item.height());
$(".column" ).find('.portlet:hidden').show()
console.log('started')
},
stop: function(event, ui) {
$(ui.helper).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone').appendTo('body');
$(this).sortable('cancel');
}
});
UPDATE:
更新：
To append the element to the second list in the location the item was dropping, do something likethe following:
要追加的元素在该项目一度下探该位置的第二个列表，做一些类似的情况如下：
stop: function(event, ui) {
var toListID = ui.item.parent().attr('id');
var idx = $('#' + toListID).children().index($(ui.item[0]));
if(idx== -1)return;
var elm = $(ui.item[0]).clone(true).removeClass('box ui-draggable ui-draggable-dragging').addClass('box-clone');
$('#' + toListID).children(':eq('+idx+')').after(elm);
$(this).sortable('cancel');
}
See fiddlefor full demo
有关完整演示，请参阅小提琴
