将 dropEffect cursor 更改为拖动时“移动”

Question

我想在使用 HTML 5 浏览器拖放时将我的 cursor 更改为“移动”。 但是，当我移动可拖动项时，这个 cursor 保持不变（默认）。 根据 MDN 文档和其他具有相同问题的各种 Stackoverflow 帖子，可以将 dataTransfer object 设置为移动。 但是，设置该属性时，cursor保持不变。

 function dragstart_handler(ev) { // Add the target element's id to the data transfer object ev.dataTransfer.setData("application/my-app", ev.target.id); ev.dataTransfer.effectAllowed = "move"; } function dragover_handler(ev) { ev.preventDefault(); ev.dataTransfer.dropEffect = "move"; } function drop_handler(ev) { ev.preventDefault(); const data = ev.dataTransfer.getData("application/my-app"); ev.target.appendChild(document.getElementById(data)); }

 .drop-zone { width: 300px; height: 200px; border: solid 1px red; }

 <p id="p1" draggable="true" ondragstart="dragstart_handler(event)"> This element is draggable. </p> <div id="target" class="drop-zone" ondrop="drop_handler(event)" ondragover="dragover_handler(event)"> Drop Zone </div>

Answer 1

您可以将 cursor 设置为在拖动元素时移动，将此行添加到您的dragstart_handler function：

ev.dataTransfer.setData("text/plain", ev.target.style.cursor = "move");

这行代码将数据类型设置为文本/纯文本并将 ev.target.style.cursor 属性分配给“移动”。 当与事件 (ev) 关联的元素被拖动时，这会将 cursor 设置为“移动”模式。

需要将数据类型设置为text/plain ，因为dataTransfer object 只接受纯文本类型的数据。 将数据类型设置为纯文本可确保数据格式正确并且可以成功传输。

另外值得注意的是，不同的浏览器对HTML5拖放的支持程度不同。 一些浏览器可能支持基本功能，而其他浏览器可能支持更高级的功能，例如一次拖放多个元素。

此外，浏览器可能对拖放操作有不同的实现，例如拖放操作如何启动或数据如何传输。

MDN 文档中的更多信息：

 function dragstart_handler(ev) { // Add the target element's id to the data transfer object ev.dataTransfer.setData("application/my-app", ev.target.id); // Set the cursor to move when the element is being dragged ev.dataTransfer.setData("text/plain", ev.target.style.cursor = "move"); // Add this line of code } function dragover_handler(ev) { ev.preventDefault(); ev.dataTransfer.dropEffect = "move"; } function drop_handler(ev) { ev.preventDefault(); const data = ev.dataTransfer.getData("application/my-app"); ev.target.appendChild(document.getElementById(data)); }

 .drop-zone { width: 300px; height: 200px; border: solid 1px red; cursor: move; }

 <p id="p1" draggable="true" ondragstart="dragstart_handler(event)"> This element is draggable. </p> <div id="target" class="drop-zone" ondrop="drop_handler(event)" ondragover="dragover_handler(event)"> Drop Zone </div>