将拖放效果光标更改为拖动时"移动"

Question

我想在使用HTML 5浏览器拖放时将光标更改为'move'。但是，当我移动可拖动项时，光标保持不变(默认值)。根据MDN文档和其他各种Stackoverflow帖子的相同问题，可以将datattransfer对象设置为移动。但是，当设置此属性时，光标保持不变。

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

您可以将光标设置为在拖动元素时移动，将这行添加到您的dragstart_handler函数中:

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

这行代码将数据类型设置为text/plain，并将ev.target.style.cursor属性赋值为"move"这将光标设置为"移动"。模式

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

同样值得注意的是，不同的浏览器对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>