JavaScript 拖放 API：实现元素的拖放交互功能-js教程-PHP中文网

JavaScript 拖放 API：实现元素的拖放交互功能

夜晨

发布： 2025-11-06 04:33:24

原创

867人浏览过

要实现拖放功能需设置draggable="true"，并通过dragstart、dragover、drop等事件配合dataTransfer传递数据，其中dragover必须调用preventDefault才能触发drop。

javascript 拖放 api：实现元素的拖放交互功能

拖放功能在现代网页中很常见，比如文件上传、任务排序、拼图游戏等场景。JavaScript 提供了原生的拖放 API（Drag and Drop API），无需依赖第三方库就能实现基本的拖放交互。下面介绍如何使用该 API 实现元素的拖放。

启用拖拽：设置 draggable 属性

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

例如：

只有设置了 draggable="true" 的元素才能触发拖放事件。

立即学习“Java免费学习笔记（深入）”；

关键拖放事件详解

拖放过程涉及多个事件，主要分为两类：被拖动元素的事件和目标区域的事件。

常用事件包括：

讯飞开放平台

科大讯飞推出的以语音交互技术为核心的AI开放平台

查看详情

dragstart：拖动开始时触发，通常在这里设置拖动数据
drag：拖动过程中持续触发
dragend：拖动结束（无论是否释放成功）
dragenter：被拖元素进入目标区域
dragover：被拖元素在目标区域上移动，需阻止默认行为才能触发 drop
drop：在目标区域释放元素时触发，处理放置逻辑
dragleave：被拖元素离开目标区域

实现拖放的基本步骤

以下是一个简单的文本拖放示例，将一个 div 拖到另一个容器中。

HTML 结构：

<div id="source" draggable="true" style="background: yellow; padding: 20px;">
拖动我到下方盒子
</div>

<div id="target" style="width: 200px; height: 100px; background: #eee; border: 2px dashed #999; margin-top: 20px; text-align: center; line-height: 100px;">
放下到这里
</div>

JavaScript 代码：

const source = document.getElementById('source');
const target = document.getElementById('target');

source.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', source.innerText);
});

target.addEventListener('dragover', (e) => {
  e.preventDefault(); // 必须阻止默认行为，否则 drop 不会触发
});

target.addEventListener('drop', (e) => {
  e.preventDefault();
  const data = e.dataTransfer.getData('text/plain');
  target.innerText = data;
});

说明：