HTML拖拽实现：如何在拖拽元素经过可放置区域时切换为copy光标

核心通过 HTML5 原生拖拽 API 的 dataTransfer 对象配置拖拽行为属性实现：

• 拖拽开始时通过 effectAllowed 声明允许的拖拽操作类型
• 拖拽进入可放置区域时通过 dropEffect 指定当前区域对应的操作，即可自动唤起对应光标样式

具体修改点 #

1. 调整drag函数，新增effectAllowed配置，允许复制类拖拽操作
2. 调整allowDrop函数，新增dropEffect配置，指定可放置区域的操作类型为copy，触发对应光标

完整可运行代码 #

JS 部分 #

function allowDrop(ev) {
  ev.preventDefault();
  // 指定当前放置区域对应的操作类型为copy，触发对应系统光标
  ev.dataTransfer.dropEffect = 'copy';
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
  // 声明本次拖拽允许的操作类型包含copy
  ev.dataTransfer.effectAllowed = 'copy';
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  var elem = document.getElementById(data);
  ev.target.appendChild(elem);
}

CSS 部分 #

原有CSS无需修改即可生效，drag元素的cursor: move仅作用于拖拽前的悬停状态，不会影响拖拽过程中的系统光标渲染。如果需要额外适配无原生拖拽光标效果的场景，可补充放置区域的拖拽悬停样式：

.drop {
  width: 100px;
  height: 100px;
  background: blue;
}
/* 可选：拖拽经过放置区域时自定义光标 */
.drop[ondragover] {
  cursor: copy;
}

.drag {
  width: 50px;
  height: 50px;
  background: red;
  cursor: move!important;
}

HTML 部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drag_elem" class="drag" draggable="true" ondragstart="drag(event);"></div>

修改后拖拽红色方块进入蓝色可放置区域时，Mac系统会自动显示对应copy样式光标。

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