在拖动时拖放游标和chrome中的光标更改

Question

我在jsFiddle：Drag N Drop cursors

中设置了一个拖放方案

<div class="dragMe" draggable="true">Drag Me</div>
<div class="dragHere">Drag Here</div>

CSS：

.dragMe {
  height: 50px;
  width : 50px;
  background-color: Green;
  cursor: grab;
  cursor: -webkit-grab;
}
.dragMe:active {
  cursor: grabbing;
  cursor: -webkit-grabbing;
}
.dragHere {
    height: 150px;
    width : 150px;
    background-color: Red;
}

JS：

$(document).ready(function () {
    $(".dragMe").on("dragstart", function (event) {
        var dataTransferObj = event.originalEvent.dataTransfer;
        dataTransferObj.effectAllowed = "move";
        dataTransferObj.setData('Text', $(this).attr('id'));
    });
    $(".dragHere").on("dragover drop", function (event) {
        event.preventDefault();
        if (event.type === 'dragover') {
            event.originalEvent.dataTransfer.dropEffect = 'move';
        }
    });
});

首先，两个浏览器都会显示在活动时更改为抓取的抓取光标。但是一旦拖动开始，在chrome和safari中，光标会变回指针。

我想保留抓取手形光标直到拖动结束。图像的质量不是很好，但你可以看到我正在谈论的行为。

Firefox行为：

Safari＆amp; Chrome行为：

我尝试在拖动事件上更改元素的光标css属性，但这没有任何效果。有谁知道为什么会这样？

Answer 1

尝试在.dragHere div上设置user-select: none

如果这不起作用：chrome sets cursor to text while dragging, why?

或：Safari. Wrong cursor when dragging