HTML5 Drag & Drop Change icon/cursor while dragging

You are after dropEffect:

Initialize it in dragstart:

event.dataTransfer.effectAllowed = "copyMove";

Update it in dragenter:

event.dataTransfer.dropEffect = "copy";

I have a standalone crossbrowser HTML5 drag and drop example here: http://jsfiddle.net/rvRhM/1/

Have a look at the dragstart and dragend events. dm is the element being dragged.

EventUtil.addHandler(dm, 'dragstart', function(e) {    e.dataTransfer.setData(format, 'Dragme');    e.dataTransfer.effectAllowed = effect;    var target = EventUtil.getCurrentTarget(e);    target.style.backgroundColor = 'blue';    target.style.cursor = 'move'; // You can do this or use a css class to change the cursor    return true;});

Be sure the reset the cursor when dragging ends:

EventUtil.addHandler(dm, 'dragend', function(e) {      var target = EventUtil.getCurrentTarget(e);    target.style.backgroundColor = '';    target.style.cursor = 'default'; // Reset cursor    return true;});

Adding pure css solution, which may be useful for few folks. Use this class on the html element.

.grab {        cursor: move;        cursor: grab;        cursor: -moz-grab;        cursor: -webkit-grab;        .thumbnails-list{            cursor: pointer;        }    }    .grab:active {        cursor: grabbing;        cursor: -moz-grabbing;        cursor: -webkit-grabbing;    }