拖动时在 safari 和 chrome 中拖放光标更改答案

【问题标题】：Drag and drop cursor changes in safari and chrome while dragging拖动时在 safari 和 chrome 中拖放光标更改
【发布时间】：2017-06-09 21:22:13
【问题描述】：

我在 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 属性，但这没有任何效果。有谁知道为什么会这样？

【问题讨论】：

标签： jquery css html drag-and-drop

【解决方案1】：

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

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

或：Safari. Wrong cursor when dragging

【讨论】：