6

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

General Grievance
  • 4,555
  • 31
  • 31
  • 45
Surfine
  • 392
  • 2
  • 5
  • 15
  • I have the same problem. Did you ever find any solution? Here is a duplicate link http://stackoverflow.com/questions/14930811/html5-drag-and-drop-dnd-changing-cursor – Ricky Jiao Apr 01 '16 at 15:46

2 Answers2

2

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/

john Smith
  • 17,409
  • 11
  • 76
  • 117
  • Not exactly what I was looking for but can u link me to the jquery UI? – Surfine Apr 28 '13 at 10:59
  • ah okay I missed you dont use jqueryUI, jquery itself doesnt provide draggable afaik but you can easily build it yourself http://stackoverflow.com/questions/8569095/draggable-div-without-jquery-ui – john Smith Apr 28 '13 at 11:02
  • BTW doesn't work on "over" and "out" methods (events where you would like to manipulate them dynamically) – Roman Pokrovskij Mar 21 '15 at 18:29
-3

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

Roman Pokrovskij
  • 9,449
  • 21
  • 87
  • 142
  • 1
    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. – H27studio Apr 10 '15 at 10:27
  • 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 Apr 10 '15 at 23:07
  • 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. – Roman Pokrovskij Apr 11 '15 at 18:49