With HTML5 drag and drop, how can I change the drag image when it's over the drop zone?

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.

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);
};