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?

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?

• javascript
• jquery
• jquery-ui

• 1 Beware of generating invalid HTML (duplicate IDs) when using clone(). – jbabey Commented Jan 7, 2013 at 16:30
• 1 This question is very similar and has a great answer -- look at the top-voted one, not the accepted one. – Coderer Commented Dec 30, 2013 at 11:09

2 Answers 2

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

If anyone using new version just use:

revert: true

More details here: jQuery Sortable - Keep it in original list