JavaScript拖拽实现：原生Drag API详解

即使监听了 drop，若没处理 dragenter 和 dragover，拖入时会出现禁止图标（?）。正确写法：

const dropZone = document.getElementById('drop-area');
dropZone.addEventListener('dragenter', e => e.preventDefault());
dropZone.addEventListener('dragover', e => e.preventDefault()); // 必须！
dropZone.addEventListener('drop', e => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  // 执行插入、移动等逻辑
});

常见坑与实用建议

原生 API 行为较“保守”，实际开发中容易踩坑：

• 不支持拖拽排序（如列表项互换位置）：API 只提供“从 A 拖到 B”，不自动交换 DOM 节点，需手动操作（如用 insertBefore 或 appendChild）
• 无法获取拖拽中的鼠标相对坐标：dataTransfer 不暴露坐标，需结合 mousemove + setDragImage() 自定义拖影
• 移动端默认不支持：iOS Safari 和 Android Chrome 均未启用该 API，需降级为 touchstart/move/end 方案
• 可调用 e.dataTransfer.setDragImage(elem, x, y) 替换默认拖影（如显示半透明副本），x/y 是相对于元素左上角的偏移

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~