Question

So here’s what I want to do. I would like to be able to drag an element, and have it dynamically change it’s default drag image to a different image when it’s over the drop zone.

Answer 1

You are able to set the drag image using dataTransfer.setDragImage method. It exists in the event objects of all of the drag events, including the dragover event.

Some basic code would be:

dropElem.ondragover = function(e) {
    if (e.stopPropagation) {
        e.stopPropagation(); //Stops some browsers from redirecting.
    }
    var dragIcon = document.createElement('img');
    dragIcon.src = 'image.png';
    dragIcon.width = 100;
    e.dataTransfer.setDragImage(dragIcon, 0, 0);
};