拖放功能原生实现_从拖起到放下全流程_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

拖放功能原生实现_从拖起到放下全流程

2025-11-15

浏览次数：次

返回列表

原生HTML5 Drag and Drop API可实现网页拖放功能。1. 设置元素draggable="true"使其可拖动；2. 在dragstart事件中通过dataTransfer.setData()存储数据；3. 目标区域监听dragover并阻止默认行为以触发drop；4. drop事件中通过getData()获取数据完成放置。需注意事件流顺序与默认行为的处理。

拖放功能原生实现_从拖起到放下全流程

网页中的拖放功能可以通过原生 HTML5 Drag and Drop API 实现，无需依赖第三方库。整个流程包括拖动源元素、触发拖动事件、数据传递以及目标区域接收放置。下面详细介绍从拖起到放下的完整实现过程。

1. 设置可拖动元素

要让一个元素可拖动，需设置其 draggable="true" 属性。这是所有拖放操作的前提。

示例：

拖我

只有设置了该属性的元素才能触发拖动事件，如图片、链接默认可拖动，其他元素需手动开启。

2. 监听拖动相关事件

拖放涉及多个关键事件，按顺序发生在不同元素上：

dragstart：在拖动开始时触发，用于设置拖动数据和效果
drag：拖动过程中持续触发
dragend：拖动结束（无论是否成功）时触发
dragenter：被拖动元素进入目标区域时触发
dragover：在目标区域上方持续移动时触发（需阻止默认行为才能触发 drop）
dragle*e：离开目标区域时触发
drop：在目标区域释放时触发，处理数据接收

常见做法是在 dragstart 中通过 event.dataTransfer.setData(format, data) 存储拖动数据，如文本、自定义类型等。

3. 实现放置目标区域

目标元素需要监听 dragover 和 drop 事件。注意：必须在 dragover 中调用 event.preventDefault()，否则无法触发 drop。

Visla

AI视频生成器，快速轻松地将您的想法转化为视觉上令人惊叹的视频。

100 查看详情 Visla

示例代码：

targetElement.addEventListener('dragover', function(e) {
  e.preventDefault(); // 允许放置
});

targetElement.addEventListener('drop', function(e) {
  e.preventDefault();
  const data = e.dataTransfer.getData('text/plain');
  console.log('接收到的数据:', data);
});