Hide / customize cursor during HTML5 drag

I'd like to customize the mouse cursor during a HTML5 drag operation because it's one thing to setDragImage to something representing the object being dragged (not in IE) but it generally looks pretty awful having the standard mouse cursor superimposed. This is especially the case when the 'DragImage' is small and there is no way to control the opacity of the 'DragImage'.

I have various CSS cursors specified on the drop target but these get disabled / ignored by both Chrome and Firefox during a drag. This leaves us with the standard unattractive arrow-and-dotted-box.

Here's the fiddle: http://ift.tt/1Unb0Tg

Here's the HTML:

<img draggable id="i" src="http://ift.tt/1gJHVmN"/>

<table>
    <tr>
        <td class="a">Copy</td>
        <td class="b">None</td>
    </tr>
    <tr>
        <td class="c">Move</td>
        <td class="d">Crosshair</td>
    </tr>
</table>

Here's the CSS:

td {
    padding: 30px;
    font-size: 2em;
    font-family: arial;
    border: 3px solid white;
    background-color: #eee;
    border-spacing: 10px;
}

.a {    cursor: copy;}
.b {    cursor: none;}
.c {    cursor: move;}
.d {    cursor: crosshair;}

img {
    cursor: move;
    cursor: -moz-grabbing;
}

Here's the jQuery:

var i = $('#i');

i.on('dragstart', function(e) {
    e.originalEvent.dataTransfer.setData('text', 'foo');
    e.originalEvent.dataTransfer.setDragImage(this, this.offsetWidth/2, this.offsetHeight/2);
});

$('td').on('dragenter, dragover', function(e) {
   e.preventDefault();
   e.stopPropagation();
    return false;
});

$('td').on('drop', function(e) {
    $(this).append(i);
    e.preventDefault();
});

Is there a way to hide or change the mouse cursor during a HTML5 drag?

via Chebli Mohamed