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

Caryl

I have the same problem. Did you ever find any solution? Here is a duplicate link #14931311 – Wouldbe

Answer 1

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/

Iodometry

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

ah okay I missed you dont use jqueryUI, jquery itself doesnt provide draggable afaik but you can easily build it yourself #8569595 – Iodometry

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

Answer 2

Yes it is possible. You should change the cursor of item that you are dragging (not the destination one).

Socher

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. – Handfast

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. – Socher

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. – Socher