How to get the mouse cursor do a grab on mouse down?

Question

I have made a demo on JSFIDDLE
UPDATE this version works in FF but not chrome..
UPDATE 2 This website seems to have a working solution.

my Javascript is as follows

$("#click").live({
  mousedown: function() {
            this.addClass("closed");
        },
  mouseup: function() {
            this.removeClass("closed");
        }
});

and the CSS is as follows

.closed {
    cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}

But why doesn't the cursor become a closed hand on mouse down with this jQuery code? Thank you so much! Any help would be appreciated!

Answer 1

You can get the mouse cursor grab with CSS only:

/* Standard cursors */    
.element { cursor: grab; }
.element:active { cursor: grabbing; }

/* Custom cursors */
.element { cursor: url('open-hand.png'), auto; }
.element:active { cursor: url('closed-hand.png'), auto; }

Answer 2

2016 Update:

Needed to do this in a jQuery slider plugin I'm working on. What I did was define the cursors in CSS, then add/remove them on touch/mouse events with jQuery.

css:

.element:hover{
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
}
.element.grabbing { 
    cursor: grabbing; 
    cursor: -webkit-grabbing;
}

JS:

$(".element").on("mousedown touchstart", function(e) {
    $(this).addClass('grabbing')
})

$(".element").on("mouseup touchend", function(e) {
    $(this).removeClass('grabbing')
})