jquery - 拖动时在 Safari 和 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 和 Chrome 行为:

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

Answer 1

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

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

或:Safari. Wrong cursor when dragging