Changing cursor while dragging

Question

Is it possible to change the cursor while dragging?

I have been searching and trying to do it for a while now. I want to change the 'not-allowed' cursor which shows up while you drag an object to another cursor.

I tried creating an event and assigning it to the image I wanted to drag:-

<img id="drag1" class="drag" src="http://www.surfixe.com/img/tick2.png" draggable="true" ondragstart="drag(event)" />

JavaScript:-

function drag(ev) {
    $('#drag1').css('cursor', 'pointer');
}

jsfiddle

Edit: Note: My little project is supposed to be html-5 drag and drop, so I need to be able to change the cursor while dragging a div with html-5 drag attribute

Solution

The 'not-allowed' cursor simply showed that there´s been no draggable at all. You have to bind your img with .draggable() method http://api.jqueryui.com/draggable/ it has it´s own option for a specific cursor to be used while dragging.

you can use it as easy like

$( "#drag1" ).draggable({ cursor: "pointer" });

http://jsfiddle.net/wpcbM/3/

Comments

[Surfine]

Not exactly what I was looking for but can u link me to the jquery UI?

[john Smith]

ah okay I missed you dont use jqueryUI, jquery itself doesnt provide draggable afaik but you can easily build it yourself stackoverflow.com/questions/8569095/…

[Roman Pokrovskij]

BTW doesn't work on "over" and "out" methods (events where you would like to manipulate them dynamically)

[H27studio]

He is already applying the styles to the dragged element. And no, with native HTML5 drag and drop doesn't working just by changing the cursor of the dragged element either.

[Roman Pokrovskij]

yes you are right, authro already applied the css on draggable, I miss it. It have worked for me with jquery ui draggable "helper": I'have applied "nodrop" cursor on it when mouse was over the forbidden area. It seems helper in jquery draggable organized not trivial way.

[Roman Pokrovskij]

It is possible that helper in jquery ui draggable is regular element with absolute positioning binded to mousemove. so that is why it is work for me.