Question

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.

Answer 1

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.