JavaScript原生拖放功能需设置draggable=”true”，监听dragstart（设数据）、dragenter/dragover（必须preventDefault）、drop（取数据）等6个事件，注意事件触发顺序与角色分工。
用 JavaScript 实现拖放功能，核心是监听并合理处理一组特定的拖放事件，配合元素的 draggable 属性。不需要第三方库，原生 API 就够用，关键是理清事件触发顺序和各阶段该做什么。
必须设置 draggable 属性
只有显式设置了 draggable="true" 的元素才能被拖动（默认为 false， 除外）：
关键拖放事件（共 6 个）
拖放过程分“拖动源”和“放置目标”两个角色，不同事件在不同元素上监听：
dragstart：在被拖元素上触发，**唯一可设置拖拽数据的地方**（用 event.dataTransfer.setData()） drag：拖动中持续触发（一般不用） dragend：拖动结束（无论是否放下），适合清理状态 dragenter：被拖元素进入目标区域时触发（第一次进入） dragover：**必须阻止默认行为**（event.preventDefault()），否则 drop 不会触发 drop：在目标元素上松开鼠标时触发，用 event.dataTransfer.getData() 取数据
一个最小可用示例
把 A 区域的文本拖到 B 区域：
立即学习“Java免费学习笔记（深入）”；
const source = document.getElementById(‘source’);
const target = document.getElementById(‘target’);
source.addEventListener(‘dragstart’, e => {
e.dataTransfer.setData(‘text/plain’, e.target.textContent);
});
target.addEventListener(‘dragenter’, e => e.preventDefault());
target.addEventListener(‘dragover’, e => e.preventDefault()); // 必须
target.addEventListener(‘drop’, e => {
e.preventDefault();
const text = e.dataTransfer.getData(‘text/plain’);
e.target.textContent = text;
});
实用提示
拖动时鼠标图标自动变手型，但可自定义：body.style.cursor = 'grabbing'（在 dragstart 里设，dragend 恢复） dataTransfer 支持多种类型（'text/plain'、'text/html'、'files'），传文件需配合 FileReader 想高亮目标区域？在 dragenter 加 class，dragleave 移除（注意：dragleave 在子元素上也会触发，需判断 e.relatedTarget） 移动端不支持原生 drag/drop，需用 touchstart/move/end 模拟
基本上就这些。不复杂但容易忽略 preventDefault() 和 setData() 的时机。
以上就是如何用javascript实现拖放功能_需要哪些事件？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1544002.html
微信扫一扫 
支付宝扫一扫 
