将光标更改为'dragstart'上的'move'

Question

我正在尝试在拖动开始后将光标更改为"移动"。我尝试将dropEffect属性设置为move但这不起作用。https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

如何在dragstart事件触发后将cursor更改为仅在move？

const button = document.querySelector("button");
console.log(button);
button.addEventListener("dragstart", dragStart);
function dragStart(e) {
e.dataTransfer.setData("text/plain", 'hello');
e.dataTransfer.dropEffect = "move";
console.log(e);
}

<button type="button" draggable="true">Drag Me</button>

Answer 1

据我所知，dropEffect仅在用户将鼠标悬停在放置目标上时才可用：

在dragenter和dragover事件的事件处理程序中，如果需要的操作与用户请求的操作不同，则应修改dropEffect。

— MDN

它说dragenter，dragover但不dragstart。

Answer 2

为了解决这个问题，我不得不更改dragstart上的光标并将其恢复为dragend

const button = document.querySelector("button");
console.log(button);
button.addEventListener("dragstart", dragStart);
button.addEventListener("dragend", dragEnd);
function dragStart(e) {
e.dataTransfer.setData("text/plain", 'hello');
e.dataTransfer.effectAllowed = "move";
e.target.style.cursor='move';
console.log(e);
}
function dragEnd(e) {
e.target.style.cursor='default';
}

<button type="button" draggable="true">Test Me</button>