HTML5 drag和drop具体使用详解

发布者: 天下网吧 | 发布时间: 2025-6-16 12:27| 查看数: 86| 评论数: 0|帖子模式

简介

拖拽（Drag/Drop）是一个很普遍、很常用的操作，即抓取一个对象后，放到想要放的地方。在H5中，拖拽是一个标准操作，任何元素都可以拖拽！！但是！！想要实现拖拽，需要添加拖拽属性。
H5中拖拽属性：draggable： auto | true | false
注意：链接和图片默认是可拖动的，则不需要 draggable 属性。
- Drag（在拖拽目标时触发事件）

dragstart - 元素开始拖动时触发此事件
drag - 元素正在拖动时触发此事件
dragend - 元素拖动结束后触发此事件

- Drop（在目标区域释放时触发事件）

dragenter - 当被拖动的元素进入目标区域内时触发此事件
dragover - 当被拖动的元素在目标区域内拖动时触发此事件
dragleave - 当被拖动的元素离开目标区域时触发此事件
drop - 当被拖动的元素在目标区域被放下时触发此事件

拖拽步骤

设置元素属性draggable 为 true

<main class="main">
<div class="left" id="left">
<div class="txt-show">左边区域</div>
<div class="dargable txt" id="txt1" draggable="true">可移动的文字一</div>
<div class="dargable txt" id="txt2" draggable="true">可移动的文字二</div>
<div class="dargable txt" id="txt3" draggable="true">可移动的文字三</div>
<div class="dargable txt" id="txt4" draggable="true">可移动的文字四</div>
<div class="dargable txt" id="txt5" draggable="true">可移动的文字五</div>
</div>
<div class="right" id="right">
<div class="txt-show">右边区域</div>
</div>
</main>

复制代码

拖动
dragstart 事件：在进行拖放操作时，通过dataTransfer来实现数据的存储和获取，每个event事件对象中都会有DataTransfer对象用来保存被拖动的数据。它可以保存一项或多项数据、一种或者多种数据类型。

let left = document.getElementById('left')
let target = document.getElementById('right')
left.addEventListener('dragstart', (event) => {
const target = event.target;
// 在项目拖动的开始事件(ondragstart)的时候，可以对dataTransfer进行设值操作(setData)。
// 拖拽， dataTransfer 属性，等于运输车
// 后续用 dataTransfer.getData获取
// 在项目拖动结束的时，可以获取dataTransfer对象里的值。
event.dataTransfer.setData('Text', target.id)
// js 事件有冒泡机制
console.log('drag开始拖动啦1');
})

复制代码

drag事件：在拖拽过程中一直执行

left.addEventListener('drag', (event) => {
console.log('drag正在拖啦2');
})

复制代码

dragend事件：结束

left.addEventListener('dragend', (event) => {
console.log('dragend拖动结束啦7');
})

复制代码

放置
dragenter 和dragleave 事件：进入或离开目标区域

target.addEventListener('dragenter', (event) => {
console.log('dragenter进入区域啦3')
})
target.addEventListener('dragleave', (event) => {
console.log('dragleave离开拖动区域啦5')
})

复制代码

dragover事件：默认无法将数据/元素放置到其他元素中。如果需要设置允许放置，就要阻止元素的默认行为。

target.addEventListener('dragover', (event) => {
// 阻止默认行为
event.preventDefault();
console.log('dragover在区域内拖动啦4')
})

复制代码

drop事件：放下

target.addEventListener('drop', (event) => {
console.log('drop释放鼠标啦6')
let drag_id = event.dataTransfer.getData('text')
target.appendChild(document.getElementById(drag_id))
})

复制代码

完整代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .main { display: flex; justify-content:space-around; } .left { width: 300px; height: 500px; border: 1px solid lightseagreen; margin-right: 10px; /* background-color: green; */ } .right { width: 300px; height: 500px; border: 1px solid lightseagreen; text-align: center; padding: 1px; /* background: red; */ } .txt { border: 1px solid gray; margin: 1px; padding: 5px; cursor: move; } </style></head><body> <main class="main">
<div class="left" id="left">
<div class="txt-show">左边区域</div>
<div class="dargable txt" id="txt1" draggable="true">可移动的文字一</div>
<div class="dargable txt" id="txt2" draggable="true">可移动的文字二</div>
<div class="dargable txt" id="txt3" draggable="true">可移动的文字三</div>
<div class="dargable txt" id="txt4" draggable="true">可移动的文字四</div>
<div class="dargable txt" id="txt5" draggable="true">可移动的文字五</div>
</div>
<div class="right" id="right">
<div class="txt-show">右边区域</div>
</div>
</main> <script> let left = document.getElementById('left') let target = document.getElementById('right') left.addEventListener('dragstart', (event) => { event.dataTransfer.setData('Text', target.id) console.log('drag开始拖动啦1'); }) target.addEventListener('dragstart', (event) => { const target = event.target; event.dataTransfer.setData('Text', target.id) }) left.addEventListener('drag', (event) => {
console.log('drag正在拖啦2');
}) left.addEventListener('dragend', (event) => {
console.log('dragend拖动结束啦7');
}) target.addEventListener('dragenter', (event) => { console.log('dragenter进入区域啦3') }) target.addEventListener('dragover', (event) => { event.preventDefault(); console.log('dragover在区域内拖动啦4') }) left.addEventListener('dragover', (event) => { event.preventDefault(); }) target.addEventListener('dragleave', (event) => { console.log('dragleave离开拖动区域啦5') }) target.addEventListener('drop', (event) => { let drag_id = event.dataTransfer.getData('text') target.appendChild(document.getElementById(drag_id)) }) left.addEventListener('drop', (event) => { let drag_id = event.dataTransfer.getData('text') left.appendChild(document.getElementById(drag_id)) }) </script></body></html>

复制代码

小记

dragstart事件中通过dataTransfer来实现数据的存储和获取，每个event事件对象中都会有DataTransfer对象用来保存被拖动的数据。在项目拖动的开始事件(ondragstart)的时候，可以对dataTransfer进行设值操作(setData)。event.dataTransfer.setData() 进行设值，在拖动结束后，可以通过event.dataTransfer.getData()获取dataTransfer对象里的值。
浏览器默认无法将数据/元素放置到其他元素中，如果需要设置允许放置，就要阻止元素的默认行为。通过event.preventDefault()阻止。
可以通过添加css样式进行对拖拽效果的改变。例：dragSrc.classList.add('ds') 。使用classList在元素中添加，移除及切换 CSS 类，classList 属性是只读的，但可以使用 add() 和 remove() 方法修改它。
使用 appendChild() 方法移除元素到另外一个元素。
HTML Drag and Drop API
DataTransfer()
HTML DOM appendChild() 方法
HTML DOM addEventListener() 方法
到此这篇关于HTML5 drag和drop具体使用详解的文章就介绍到这了,更多相关HTML5 drag和drop内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/html5/761111.html
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

HTML5 drag和drop具体使用详解

最新评论

浏览过的版块

新人须知

常见问题

维权申诉

关注微博

扫描微信

关于合作

通讯联系