jQuery UI sortable: Move clone but keep original
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
$( ".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 like the 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 fiddle for full demo