Question

我试图自定义游标的行为。现在它的工作方式如下：在mousemove上我使用：

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

onmmouse up：

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

在这种情况下：

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

光标仅适用于 -webkit（Chrome）。

虽然这个案例

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

光标仅适用于 -moz（FF）。

以下结构并没有像我预期的那样发挥作用：

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

这有效：

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

在这两种浏览器中，我read here认为这是不好的做法。

代码here有效，但我需要使用像this和that这样的结构。

像this之类的东西（这种结构现在不起作用）。

编辑1

从此other Stack Overflow post：

解决方案使用：

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

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

link here

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

编辑2

更清晰，mousedown / mouseup示例：

Case 1:（仅适用于Chrome）

Case 2:（此处mousedown没有变化）

Answer 1

按照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;
}

从这里CSS for grabbing cursors (drag & drop) 和这个评论

你确定逗号列表仍然有效吗？我正在使用cursor：move; 光标：-webkit抢;光标：-moz抢;光标：抢;与大多数人首选

如果您指定多种格式，则逗号列表有效 cursor：url（example.svg＃linkcursor），url（hyper.cur），指针

在我的情况下，我设置了CCS选项

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

并通过

取消设置取消事件（mouseup）之后

item.setAttribute("style", "cursor: auto;");。

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>

Crossbrowser GRAB游标（-moz，-webkit）

编辑1

编辑2

1 个答案: