Search code examples
jquerynesteddraggablejquery-ui-sortablenested-sortable

jQuery Nested Sortable - Copying rather than moving items between 2 lists


I am using an app where you drag and drop list items between 2 nested sortables: http://jsfiddle.net/jhogervorst/Ge7eK/9/

My question is how would you change the code so it copied elements from one list to the other, rather than move them? Seems like a simple change but I can't figure it out.

Thanks.


Solution

  • I've gotten it most of the way there:

    http://jsfiddle.net/Ge7eK/41/

    receive: function(event, ui){
        var ele = document.elementFromPoint(ui.position.left, ui.position.top);
        var newEle = ui.item.clone();        
        newEle.attr("id", ""); // trying to prevent duplicate ids
        $(ele).after(newEle);            
    },
    
    remove: function(event, ui){
        event.preventDefault(); // this stops the item from being removed
    }
    

    There's a bug happening when you drag an item from, say list A to list B, then drag another item from list A over that copied item. I'm not sure why it is happening, but it may have something to do with the ids you're using.

    Also, the drop position can be a little bit finicky. If your placeholder item is between two items in the list (instead of overlapping one slightly), it will add that item to the end of the list.