Cross-browser CSS Grab cursors for dragging

For a project I was looking at the best way to implement a grabbing hand cursor for dragging an element that would work well in all browsers.
After many google searches I have collated my findings below and hopefully it helps someone.

Firstly you’ll need some javascript to detect the current browser.
I use Browser Detect which works really well.

If it’s Firefox you can use the “-moz-grabbing” and “-moz-grab” cursors built in.

cursor: -moz-grab

For the other browsers you’ll need to load them from a URL.
You can download the cursors from here:
http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur
http://www.google.com/intl/en_ALL/mapfiles/openhand.cur

the format in css should be:

cursor: url(/closedhand.cur) 4 4, move;

Where the “4 4″ are the co-ordinates, and the “move” is the fall-back cursor if the url fails.

In IE it will fail if you have the x/y co-ordinates, so it needs to be like this:

cursor: url(/closedhand.cur), move;

In Opera it will fail completely if you have any of the above :)
So we just need to ovveride for opera.

cursor: move;

either way the code below should be self explanatory:

var dragCursor;
var curBrowser = BrowserDetect.browser;
// IE doesn't support co-ordinates
var cursCoords = (curBrowser == "Explorer") ? "" : " 4 4"; 

if (dragging) {
	dragCursor = (curBrowser == "Firefox") ? "-moz-grabbing" : "url(/closedhand.cur)" + cursCoords + ", move";
	// Opera doesn't support url cursors and doesn't fall back well...
	if (curBrowser == "Opera") dragCursor = "move";
} else {
	dragCursor = (curBrowser == "Firefox") ? "-moz-grab" : "url(/openhand.cur)" + cursCoords + ", move";
}

document.getElementById('objectToDrag').style.cursor = dragCursor;

14 Comments

  1. PWC May 9, 2011 at 9:31 pm #

    Thanks!

  2. Marc July 12, 2011 at 3:38 am #

    I was hoping I could find a css only fix, apparently there’s not one.

    I was having the most trouble with IE9 where the cursor will just disappear when you start to drag if multiple values for cursor are set.

    Looks like I’m gonna have to use your method.

    Cheers…

  3. Lukas April 19, 2012 at 2:43 pm #

    Best solution i found.. great!

  4. Cody July 31, 2012 at 6:29 pm #

    Thanks!

  5. Nate October 13, 2012 at 7:14 pm #

    For those of us(me) who aren’t well versed in Javascript, would one be able to tell me where I went wrong with this?

    natenineten.com/test/zoomit

  6. noredlac December 5, 2012 at 10:26 am #

    The following snippet does not solve all browsers but is pure css that works cross webkit / firefox:

    cursor: move
    cursor: -moz-grabbing
    cursor: -webkit-grabbing

  7. sissi February 28, 2013 at 3:25 pm #

    superhelpful little resource, thanks!

  8. donya April 3, 2013 at 5:48 pm #

    Needed this. Thanks, Jordan!

  9. Shane September 24, 2013 at 7:51 pm #

    I am getting a JS error:

    ‘dragging’ is undefined

    Any help?

    • Jordan September 24, 2013 at 10:43 pm #

      That is a variable that you set when you want to toggle between the 2 mouse cursor states.

  10. supragreencoffeeblogs.com October 19, 2013 at 1:04 pm #

    Hi, Neat post. There is an issue along with your site in web explorer, might check this?
    IE nonetheless is the marketplace chief and a good
    portion of people will omit your great writing because of this problem.

  11. anand March 3, 2014 at 2:25 pm #

    I have tried this, works fine in other browser but in IE, any working example will be good.

  12. anand March 4, 2014 at 8:52 am #

    Issue got fixed in IE, after giving relative path. Thx

Trackbacks/Pingbacks

  1. Vjeux » CSS – Cross Browser Drag Cursor - July 26, 2012

    [...] JaycoDesign: Cross-browser CSS Grab cursors for dragging [...]

Post Comment