So this is what I have (recommended elsewhere, I'm not so good with JS: function drag(drop_target, event) { event.dataTransfer.setData('Text', drop_target.id); } // drag function drop(drop_target, event) { // drop var id = event.dataTransfer.getData('Text'); event.target.appendChild(document.getElementById(id)); event.preventDefault(); } Works fine so far. But I want the image I'm dragging to remain in it's position, and from research I understand that event.dataTransfer.effectAllowed = "copy"; event.dataTransfer.dropEffect = "copy"; does that. Problem is I cannot get it to work. Where should these extracts be placed in my script to make sure my draggable images copy, instead of moving the data?
FYI, here is an example of it being used. The thumbnail images are draggable, the bottom grey bar is the drag zone. http://www.airwalk-design.com/diy/photoshop/basic-texturing/