HTML 5 Drag and Drop - Using a Custom Cursor

Question

I'm actually trying to use a custom cursor when the drag operation of HTML 5 is performed. The drag and drop API occurs, but I cannot override the default cursor when the drag event fires. Here is the code of how I am trying to achieve it,

$("#myDiv").live('mousedown', function(ev) { $(this).css("cursor", "url(res/customCursor.cur), default !important"); }); 

Since the mouse will be clicked when the dragover event occurs, I am trying to change the cursor in the mousedown event of the drag target. I also tried changing the cursor in the event handler of the dragover event, but even this does not work.

Answer 1

In the style definitions (<style> element or .css file) create a class, for example

 .dragAndDropInProgress { cursor: url(....), default !important; } 

and then, when you signal ondragstart, attach this class to the body of the document, making sure to delete it again as soon as you see ondragend.