启用元素拖拽需设置draggable="true"，通过监听dragstart、dragover、drop事件并使用dataTransfer传递数据，可实现拖放功能，其中dragover必须阻止默认行为才能触发drop。
JavaScript 拖放 API 允许开发者实现元素的拖拽功能，比如把一个任务从“待办”列表拖到“已完成”列表。通过自定义拖拽行为和数据传递，可以灵活控制拖放过程中的每一个阶段。
启用元素可拖拽
默认情况下，大多数 HTML 元素是不可拖动的。要让一个元素可拖动，需要设置其 draggable 属性为 true。
例如：<div draggable="true">拖我试试</div>
图片和链接默认可拖动，其他元素如 div、span 等需手动开启 draggable 属性。
立即学习“Java免费学习笔记（深入）”；
监听拖放事件
拖放过程涉及多个关键事件，合理监听这些事件才能实现完整逻辑。
- dragstart：用户开始拖动元素时触发。适合在此设置拖拽数据和视觉反馈。
- dragover：拖动过程中持续在目标区域上移动时触发。必须阻止默认行为才能允许放置。
- drop：在目标区域释放被拖动元素时触发。通常在这里处理数据接收和 DOM 更新。
- dragend：拖动结束（无论是否成功放置）时触发。可用于清理样式或状态。
示例代码：
element.addEventListener('dragstart', e => {
e.dataTransfer.setData('text/plain', '拖拽的数据');
e.target.classList.add('dragging');
});
target.addEventListener('dragover', e => {
e.preventDefault(); // 必须阻止默认，否则无法触发 drop
});
target.addEventListener('drop', e => {
e.preventDefault();
const data = e.dataTransfer.getData('text/plain');
console.log('接收到的数据:', data);
});
使用 dataTransfer 传递数据
dataTransfer 是拖放事件的核心对象，用于在拖动源和放置目标之间传递数据。
它支持多种数据格式，最常用的是 text/plain，也可以用自定义类型。
- setData(format, data)：在 dragstart 中设置数据。
- getData(format)：在 drop 事件中读取数据。
- clearData()：清除已设置的数据。
建议使用结构化字符串（如 JSON）传递复杂信息：
e.dataTransfer.setData('text/plain', JSON.stringify({id: 1, type: 'task'}));
自定义拖拽视觉效果
可以通过 CSS 或 JavaScript 控制拖拽过程中的外观。
- 在 dragstart 中添加类名，比如 .dragging，配合 CSS 实现半透明效果。
- 使用 setDragImage() 自定义拖动时显示的图像：
const img = new Image(); img.src = 'custom-handle.png'; e.dataTransfer.setDragImage(img, 10, 10);
这个方法能提升用户体验，比如只显示一个小图标作为拖动手柄。
基本上就这些。掌握 dragstart、dragover、drop 三个核心事件，配合 dataTransfer 数据传递，就能实现大多数拖放需求。关键是记得阻止 dragover 的默认行为，不然 drop 不会触发。不复杂但容易忽略。
