Drag cursor in javascript?

Question

I need to set the drag cursor in some places, but I can't see it listed here http://www.w3schools.com/cssref/pr_class_cursor.asp

In my case it appears when I drag some image :

http://s2.subirimagenes.com/otros/previo/thump_8236773bgform29.jpg

Is there a code to use like body{cursor: drag} ?

Chris Bier · Accepted Answer · 2013-01-14T14:05:56.110

5

You can use the move cursor paramater:

.target {cursor:move}

That cursor you are asking for is unique, if you want to use one with pure CSS then the best for this case is the move cursor.

Edit: For a custom cursor like the one you see, you can use the URL property value

.target{ cursor: url(mycursor.gif), auto; }

You want to specify a default cursor at the end just incase the one specified by the URL cannot be used.

If you want this cursor only to appear when they are dragging then you'll have to apply this CSS rule to the element being dragged when the user clicks on it.

edited Jan 14 '13 at 14:05

answered Jan 14 '13 at 14:00

Chris Bier

14,183
17
67
103

I need the hand ;) like in the picture. – fpilee Jan 14 '13 at 14:02
Your picture is blocked by OpenDNS for me, maybe a different image hosting service would prevent it happening for others too? – Ashley Sheridan Jan 14 '13 at 14:05
Edited to explain using a custom cursor – Chris Bier Jan 14 '13 at 14:06
I use Firefox 18 in ArchLinux with KDE the default cursor icon shows me a grabbing hand when i drag images. It must be some code to get this cursor and i'm sure is be present in every cursor theme – fpilee Jan 14 '13 at 14:09

score 3 · Answer 2 · answered Jan 14 '13 at 14:04

3

You may be able to use the vendor-specific grab cursor, but I don't think the support is quite there yet. It might be best to use a custom icon or, as suggested by Chris B., the move cursor.

.grab {
   cursor: url("http://www.example.com/openhand.cur") 8 8, move;
   cursor: -moz-grab;
   cursor: -webkit-grab;
}

.grabbing {
   cursor: url("http://www.example.com/closedhand.cur") 8 8, move;
   cursor: -moz-grabbing;
   cursor: -webkit-grabbing;
}

answered Jan 14 '13 at 14:04

jeffjenx

17,041
6
57
99

@user, The image depicts a blue cursor that resembles a 3D pie-chart. The only way to get that type of cursor is using a custom image. – jeffjenx Jan 14 '13 at 14:13
The cursor is a standard cursor present in my cursor theme. You should have one similar in your O.S – fpilee Jan 14 '13 at 14:16
I do not have any cursors that look like that in any of the default themes provided on a standard installation of Windows 7 Professional. – jeffjenx Jan 14 '13 at 14:24
Have you try to drag the stackoveflow logo. It should appear, offcourse it not will be blue like me, im using KDE 4.9. But should see a grabbing hand similar. – fpilee Jan 14 '13 at 16:15
1

When I drag the StackOverflow logo, I am shown the "no-drop" cursor. In the Windows mouse properties, this is labeled as "Unavailable". – jeffjenx Jan 14 '13 at 16:19

Drag cursor in javascript?

2 Answers2

Linked