Crossbrowser GRAB游标(-moz,-webkit)

Art*_*sov 7 html javascript css dom cursor

我正在尝试自定义游标的行为.现在它的工作方式如下:在mousemove上我使用:

scheme.setAttribute("cursor", "move");
Run Code Online (Sandbox Code Playgroud)

onmmouse up:

scheme.setAttribute("cursor", "auto");
Run Code Online (Sandbox Code Playgroud)

在这种情况下:

scheme.setAttribute("cursor", "-moz-grab");
scheme.setAttribute("cursor", "-webkit-grab");
Run Code Online (Sandbox Code Playgroud)

光标仅适用于-webkit(Chrome).

虽然这种情况

scheme.setAttribute("cursor", "-webkit-grab");
scheme.setAttribute("cursor", "-moz-grab");
Run Code Online (Sandbox Code Playgroud)

光标仅适用于-moz(FF).

以下结构没有像我预期的那样工作:

scheme.setAttribute("cursor", "-moz-grab, -webkit-grab");
Run Code Online (Sandbox Code Playgroud)

这有效:

scheme.setAttribute("style", "cursor:-moz-grab; cursor:-webkit-grab;");
Run Code Online (Sandbox Code Playgroud)

在这两种浏览器中,但我在这里读到这是不好的做法.


该代码在这里工作,但我需要使用的结构像这个那个.

这样的东西(这种结构现在不起作用).


编辑1

从这个其他Stack Overflow帖子:

解决方案:

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

适用于两种浏览器,但仍需要使用-moz-grab-webkit-grab值的解决方案.

链接在这里

它似乎在IE中不起作用(我希望看到第二个,保留移动图标)


编辑2

更清晰,mousedown/mouseup示例:

案例1 :(仅适用于Chrome)

案例2 :(此处mousedown没有变化)

Art*_*sov 18

根据J.Steve的回答:

.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;
}
Run Code Online (Sandbox Code Playgroud)

从这里CSS抓取游标(拖放) 和这个评论

你确定逗号列表仍然有效吗?我正在使用游标:移动; 光标:-webkit抢; 光标:-moz抢; 光标:抢; 最好的是最后一个

如果您指定多种格式(如cursor:url(example.svg#linkcursor),url(hyper.cur),指针,则逗号列表有效)

在我的例子中,我设置了CCS选项

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

并取消他们

item.setAttribute("style", "cursor: auto;"); 在我的取消事件(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;");
    }
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)