HTML 5 drag drop - Using custom cursor

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.

!important works fine in a stylesheet, or an inline style (except IE6), but not when setting styles in JavaScript or jQuery. In that case, styles with !important won't get applied in Firefox, Chrome, and IE8 or earlier. — Matt Coughlin
why not make a class and apply it to the dragged element using the addClass method in jQuery? — Valentin

Mike 'Pomax' Kamermans Mike 'Pomax' Kamermans · Accepted Answer · 2013-03-08T23:22:29

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.

HTML 5 drag drop - Using custom cursor

1 Answers