將 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>