要实现拖放功能需设置draggable=”true”，并通过dragstart、dragover、drop等事件配合dataTransfer传递数据，其中dragover必须调用preventDefault才能触发drop。
拖放功能在现代网页中很常见，比如文件上传、任务排序、拼图游戏等场景。JavaScript 提供了原生的拖放 API（Drag and Drop API），无需依赖第三方库就能实现基本的拖放交互。下面介绍如何使用该 API 实现元素的拖放。
启用拖拽：设置 draggable 属性
要让一个元素可拖动，必须设置其 draggable=”true” 属性。这是触发拖放操作的前提。
例如：
只有设置了 draggable=”true” 的元素才能触发拖放事件。
立即学习“Java免费学习笔记（深入）”；
关键拖放事件详解
拖放过程涉及多个事件，主要分为两类：被拖动元素的事件和目标区域的事件。
常用事件包括：
dragstart：拖动开始时触发，通常在这里设置拖动数据 drag：拖动过程中持续触发 dragend：拖动结束（无论是否释放成功） dragenter：被拖元素进入目标区域 dragover：被拖元素在目标区域上移动，需阻止默认行为才能触发 drop drop：在目标区域释放元素时触发，处理放置逻辑 dragleave：被拖元素离开目标区域
实现拖放的基本步骤
以下是一个简单的文本拖放示例，将一个 div 拖到另一个容器中。
HTML 结构：
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;
});
说明：
e.dataTransfer 用于在拖放过程中传递数据 dragover 事件中调用 preventDefault() 是必须的，否则无法触发 drop 可以在 setData() 中使用不同类型的数据类型（如 ‘text/html’、自定义类型等）
高级技巧与注意事项
实际开发中可能需要更精细的控制：
通过 effectAllowed 和 dropEffect 控制拖放效果（如复制、移动、链接） 使用 CSS 类在 dragenter 和 dragleave 时高亮目标区域 支持拖放文件（如从桌面拖入上传区），可通过 e.dataTransfer.files 获取文件列表 移动端不原生支持拖放 API，需结合 touch 事件模拟
基本上就这些。原生拖放 API 虽然简单，但在大多数基础场景中足够使用，理解核心事件流是关键。不复杂但容易忽略的是 dragover 中阻止默认行为这个细节。
以上就是JavaScript 拖放 API：实现元素的拖放交互功能的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1536276.html
微信扫一扫 
支付宝扫一扫 
