拖放API通过dragstart、dragover、drop等事件实现交互，在dragover中阻止默认行为可触发drop；利用dataTransfer传递数据，结合视觉反馈与自定义图像提升体验，适用于列表排序与跨容器拖拽场景。
拖放功能在现代Web应用中非常常见，比如文件上传、任务管理看板、元素排序等场景。JavaScript的原生拖放API（Drag and Drop API）提供了实现这些交互的基础能力。通过合理使用事件和数据传递机制，可以构建出流畅且功能丰富的高级交互。
理解拖放事件流程
拖放操作由一系列事件驱动，掌握这些事件的触发顺序是实现高级功能的前提：
- dragstart：用户开始拖动元素时触发，适合设置拖动数据和视觉反馈
- drag：拖动过程中持续触发，可用于实时更新状态
- dragenter：被拖动元素进入目标区域时触发
- dragover：在目标区域内移动时持续触发，需在此阻止默认行为才能触发drop
- dragleave：拖动离开目标区域时触发
- drop：在目标区域释放时触发，处理数据接收逻辑
- dragend：拖动结束（无论是否成功）时触发，可用于清理状态
关键点是必须在 dragover 事件中调用 event.preventDefault()，否则 drop 事件不会触发。
实现跨元素数据交换
拖放API支持通过 dataTransfer 对象传递数据，可用于不同元素间的信息交换：
立即学习“Java免费学习笔记（深入）”；
在 dragstart 中设置数据：
element.addEventListener('dragstart', function(e) {
e.dataTransfer.setData('text/plain', '自定义数据');
e.dataTransfer.setData('text/element-id', this.id);
e.dataTransfer.effectAllowed = 'move';
});
在 drop 时读取数据：
target.addEventListener('drop', function(e) {
e.preventDefault();
const id = e.dataTransfer.getData('text/element-id');
const draggedElement = document.getElementById(id);
this.appendChild(draggedElement);
});
利用MIME类型可传递结构化数据，如JSON字符串，实现复杂信息传递。
增强用户体验的视觉反馈
良好的视觉提示能显著提升交互体验：
- 在 dragstart 中修改被拖元素的透明度：
this.style.opacity = '0.5'; - 在 dragenter/dragover 时为目标区域添加高亮边框或背景色
- 使用 setDragImage() 自定义拖动时显示的图像
- 在 dragend 中恢复原始样式，并处理取消拖动的情况
例如自定义拖动图像：
const img = new Image(); img.src = 'custom-handle.png'; e.dataTransfer.setDragImage(img, 10, 10);
实现列表排序与容器切换
结合上述技术可构建类似Trello的任务卡片系统：
- 为每个可拖动项设置 draggable="true"
- 为容器注册 dragover 和 drop 事件
- 在 drop 时判断插入位置（通过鼠标位置计算）
- 动态调整DOM顺序或在不同容器间移动节点
对于排序，可在 dragover 时根据光标位置实时调整占位符位置，提供直观的插入预览。
基本上就这些核心要点。拖放API本身不复杂，但要做出稳定、顺滑的交互需要细致处理各种边界情况，比如多层级嵌套元素的事件冒泡、移动端兼容性等。掌握基础后，可结合CSS过渡动画进一步提升体验。
