JavaScript拖放API_自定义拖拽行为与数据传递

启用元素拖拽需设置draggable="true"，通过监听dragstart、dragover、drop事件并使用dataTransfer传递数据，可实现拖放功能，其中dragover必须阻止默认行为才能触发drop。

JavaScript 拖放 API 允许开发者实现元素的拖拽功能，比如把一个任务从“待办”列表拖到“已完成”列表。通过自定义拖拽行为和数据传递，可以灵活控制拖放过程中的每一个阶段。

启用元素可拖拽

默认情况下，大多数 HTML 元素是不可拖动的。要让一个元素可拖动，需要设置其 draggable 属性为 true。

例如：

拖我试试

图片和链接默认可拖动，其他元素如 div、span 等需手动开启 draggable 属性。

监听拖放事件

拖放过程涉及多个关键事件，合理监听这些事件才能实现完整逻辑。

• 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 不会触发。不复杂但容易忽略。