HTML5拖拽时设置dropEffect为'move'后光标未改变问题求助

仅通过dataTransfer.effectAllowed和dropEffect设置光标样式，在部分浏览器里不会生效——因为浏览器默认的拖拽反馈机制优先级更高。你需要结合CSS样式和事件处理来实现预期效果：

具体解决步骤 #

• 给可拖拽元素添加基础的cursor: move样式，让用户在未拖拽时就能看到可移动的提示
• 在dragstart事件中，除了设置effectAllowed，还可以通过setDragImage设置一个透明占位图，强制浏览器使用我们定义的光标样式（部分浏览器需要这个操作来绕过默认拖拽光标）
• 确保dragover事件中正确阻止默认行为并设置dropEffect

修改后的完整代码 #

HTML #

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

CSS #

.drop-zone {
  width: 300px;
  height: 200px;
  border: solid 1px red;
}
/* 给可拖拽元素添加基础光标样式 */
#p1 {
  cursor: move;
}
/* 拖拽过程中强制设置光标 */
.dragging {
  cursor: move !important;
}

JavaScript #

function dragstart_handler(ev) {
  ev.dataTransfer.setData("application/my-app", ev.target.id);
  ev.dataTransfer.effectAllowed = "move";
  // 添加拖拽状态类
  ev.target.classList.add('dragging');
  // 创建1x1透明GIF，覆盖浏览器默认拖拽镜像
  const dragImage = document.createElement('img');
  dragImage.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
  ev.dataTransfer.setDragImage(dragImage, 0, 0);
}

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));
  // 移除拖拽状态类
  document.getElementById(data).classList.remove('dragging');
}

// 拖拽结束后清理状态类
document.getElementById('p1').addEventListener('dragend', function(ev) {
  ev.target.classList.remove('dragging');
});

关键说明 #

• 透明base64图片是一个空白的1x1GIF，用来替换浏览器默认的拖拽镜像，让浏览器优先使用我们设置的CSS光标样式
• dragging类加!important是为了确保拖拽过程中光标样式不被浏览器默认样式覆盖
• dragend事件中移除类，避免拖拽结束后光标样式残留

内容的提问来源于stack exchange，提问作者FakeEmpire