javascript - 跨浏览器GRAB光标(-moz，-webkit)

我正在尝试自定义光标的行为。现在它以另一种方式工作:在mousemove上，我使用:

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

昂首阔步:

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

更清晰的，鼠标向下/鼠标移动的示例:

Case 1:(仅适用于Chrome)

Case 2:(此处的mousedown不变)

最佳答案

按照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-grab;光标:-moz-grab;光标:抓与大多数
首选最后

，如果您指定多种格式(例如，
光标: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;");。

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>

Grab

javascript - 跨浏览器GRAB光标(-moz，-webkit)