Crossbrowser GRAB cursor (-moz, -webkit)

Question

I'm trying to customize the behavior of the cursor. Now it works next way: on mousemove I use:

scheme.setAttribute("cursor", "move");

onmmouse up:

scheme.setAttribute("cursor", "auto");

In this case:

scheme.setAttribute("cursor", "-moz-grab");
scheme.setAttribute("cursor", "-webkit-grab");

the cursor only works for -webkit(Chrome).

While this case

scheme.setAttribute("cursor", "-webkit-grab");
scheme.setAttribute("cursor", "-moz-grab");

the cursor only works for -moz(FF).

The following structure hasn't worked as I expected:

scheme.setAttribute("cursor", "-moz-grab, -webkit-grab");

This works:

scheme.setAttribute("style", "cursor:-moz-grab; cursor:-webkit-grab;");

In both browsers, but I read here that it's bad practice.

---

The code here works but I need to use a structure like this and that.

Something like this (that structure doesn't work now).

---

Edit 1

From this other Stack Overflow post:

solution using:

scheme.setAttribute("cursor", "url(http://www.google.com/intl/en_ALL/mapfiles/openhand.cur) 4 4, move");

works in both browsers, but still needed a solution using -moz-grab and -webkit-grab values.

link here

And it does not seem to work in IE (I expect to see second, reserve move icon)

---

Edit 2

Clearer, mousedown/mouseup example:

Case 1: (works only Chrome)

Case 2: (here there are no changes on mousedown)

Answer 1

In accordance with J.Steve's answer:

.grabbable {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

 /* (Optional) Apply a "closed-hand" cursor during drag operation. */
.grabbable:active { 
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

from here CSS for grabbing cursors (drag & drop) and this comments

are you sure a comma-list still works? I'm using cursor:move; cursor:-webkit-grab; cursor:-moz-grab; cursor:grab; with most preferred last

the comma-list works if you're specifying multiple formats like cursor: url(example.svg#linkcursor), url(hyper.cur), pointer

In my case I set CCS options

item.setAttribute("style", "cursor: move; cursor: grab; cursor:-moz-grab; cursor:-webkit-grab;");

and unset them by

item.setAttribute("style", "cursor: auto;"); after my cancel event(mouseup).

---

http://jsfiddle.net/gwau7r9r/

JS:

var item = document.getElementById("changeCurArea");
    item.addEventListener("mousedown", func, false);
    item.addEventListener("mouseup", func1, false);

    function func() {
        item.setAttribute("style", "cursor: move; cursor: grab; cursor:-moz-grab; cursor:-webkit-grab;");
    }

    function func1() {
        // item.setAttribute("cursor", "auto");
        item.setAttribute("style", "cursor: auto;");
    }

HTML:

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="350" viewBox="200 150">
    <rect id="mySvgArea" width="400" height="350" stroke="black" fill="lightgrey"></rect>
    <rect id="changeCurArea" x="100" y="100" width="200" height="150" stroke="red" fill="pink"></rect>
</svg>