HTML5 Drag and Drop (DnD): changing cursor

Question

While dragging an element over the browser client area in HTML5, how can I change the cursor to any cursor that I want?

So far, I've only been able to display the default cursor while dragging (except for the none cursor wherever dropping is not supported).

I'm not talking about any of the following:

• using event.dataTransfer.setDragImage() to display an image besides the cursor

• using event.dataTransfer.dropEffect to display a copy or a link symbol besides the cursor, or to change the cursor to the none symbol

• in Firefox, using event.dataTransfer.mozCursor, since that can only perform the default system behavior, or display the arrow cursor, neither of which helps (besides, I want cross browser support, though I'm primarily targeting Chrome)

I've tried many other tricks, including using CSS :hover and :focus, and many JavaSscript tricks, all to no avail.

Thanks for any help.

Answer 1

So you want to change your cursor while dragging an element?

$('YourElement').draggable({
     cursor: "crosshair"
});

see http://api.jqueryui.com/draggable/#option-cursor for more info