在“拖拽开始”时将光标更改为“移动”。

Question

我想在拖动开始后将光标更改为“move”。我尝试将dropEffect属性设置为move，但是它没有起作用。如何在dragstart事件触发后仅更改cursor为move？https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

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>

- User123

Answer 1

据我所知，dropEffect 仅适用于当用户悬停在放置目标上时：

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

— MDN。它提到了dragenter、dragover，但没有提到dragstart。

- Marco

---

你说得对。我将发布一个答案来展示我如何实现我想要的效果。 - User123

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>

- User123