启用元素拖动需设置draggable=”true”，通过dragstart、dragover、drop事件实现拖放逻辑，利用dataTransfer传递数据并调用preventDefault()防止默认行为。
HTML5 的拖放（Drag and Drop）API 让用户可以通过鼠标拖动元素从一个位置移动到另一个位置，广泛用于文件上传、列表排序、拼图游戏等场景。实现这一功能不需要额外的库，原生 JavaScript 就能完成。
启用元素可拖动
要让一个元素可以被拖动，需设置其 draggable=”true” 属性，尤其是图片、链接默认可拖动，其他元素如 div、span 需手动开启。
示例：
监听拖放事件
拖放过程涉及多个事件，关键包括：
立即学习“前端免费学习笔记（深入）”；
dragstart：拖动开始时触发，用于设置拖动数据 dragover：被拖动元素在目标区域上移动时持续触发，必须阻止默认行为才能允许放置 drop：在目标区域释放时触发，处理放置逻辑 dragend：拖动结束（无论是否成功）
基本事件绑定示例：
const dragEl = document.getElementById('dragElement');const dropZone = document.getElementById('dropZone');dragEl.addEventListener('dragstart', (e) => { e.dataTransfer.setData('text/plain', '这是拖动的数据');});dropZone.addEventListener('dragover', (e) => { e.preventDefault(); // 必须阻止默认行为});dropZone.addEventListener('drop', (e) => { e.preventDefault(); const data = e.dataTransfer.getData('text/plain'); dropZone.textContent = data;});
实现拖放文本或自定义数据
dataTransfer 对象是拖放的核心，用于在拖动过程中传递数据。
setData(format, data)：设置拖动数据，常用格式为 text/plain getData(format)：在 drop 时获取数据 effectAllowed 和 dropEffect 可控制光标样式和操作类型（如 move、copy）
例如，拖动时显示复制图标：
dragEl.addEventListener('dragstart', (e) => { e.dataTransfer.setData('text/plain', dragEl.id); e.dataTransfer.effectAllowed = 'copy';});dropZone.addEventListener('dragover', (e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; // 显示复制光标});
拖放文件（如上传）
拖放 API 还支持文件操作。将文件从桌面拖入浏览器时，在 drop 事件中可通过 e.dataTransfer.files 获取 FileList。
dropZone.addEventListener('dragover', (e) => e.preventDefault());dropZone.addEventListener('drop', (e) => { e.preventDefault(); const files = e.dataTransfer.files; if (files.length > 0) { const file = files[0]; console.log('文件名:', file.name); // 可结合 FileReader 读取内容或用 FormData 上传 }});
基本上就这些。掌握 dragstart、dragover、drop 三个关键事件，再合理使用 dataTransfer，就能实现大多数拖放需求。注意始终调用 preventDefault() 避免浏览器默认行为中断操作。
以上就是HTML拖放API怎么实现_HTML5拖放DragDrop功能指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1582514.html
微信扫一扫 
支付宝扫一扫 
