HTML5 Drag & Drop Change icon/cursor while dragging

I'm wondering how to change during dragging (dragover/dragenter) icon/cursor when I dragenter for example to deny or allow section. Of course, I can move with cursor a part of DOM positioned absolutely, but I'm interested in native HTML5 solution.

Thanks!

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

I was trying to achieve the same and couldn't really find a nice solution. What I did in the end was setting an image to the dataTransfer and change its src with every action. That way the behavior is consistent across browsers at least. Here's a link to a page that I used as a reference:

https://kryogenix.org/code/browser/custom-drag-image.html

The accepted answer works if and only if ev.preventDefault() is called on all events changing the dropEffect (don't call it in dragstart) as described in MDN

This worked for me:

<div class="container">
	<div draggable="true">
	<div draggable="true">
</div>

$('.container').bind('dragover', function() {
	$('body').addClass('dragging');
});
$('.container').bind('dragleave', function() {
	$('body').removeClass('dragging');
});

.container > div {
	cursor: grab;
}
body.dragging .container > div {
	cursor: grabbing;
}

https://jsfiddle.net/cLb3hxtf/1/