HTML 5拖放 - 使用自定义光标

Question

I am actually trying to use a custom cursor when dragover operation of HTML 5 Drag-drop API is happening, but I am not able to do override the default cursor when dragover event is triggered. Here is the code of how I try to achieve it,

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

Since the mouse would be pressed when dragover event is happening, I try to change cursor in mousedown event of the target of drag-drop. I also have tried to change the cursor in event handler of dragover event, but even that doesn't work.

Answer 1

In your stylesheet definitions (<style> element or .css file) create a class like

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

and then when you signal the ondragstart, attach that class to the document body, making sure to remove it again once you see the ondragend.