CODEWITHSUNDEEP
javascriptjquerycsshtml
Tejas
Tejas

Reputation: 257

HTML 5 drag drop - Using custom cursor

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.

Upvotes: 4

Views: 1428

Answers (1)

Mike 'Pomax' Kamermans
Mike 'Pomax' Kamermans

Reputation: 53588

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.

Upvotes: 1

Related Questions