小编给大家分享一下前端html5中drag和drop怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

简介

拖拽（Drag/Drop）是一个很普遍、很常用的操作，即抓取一个对象后，放到想要放的地方。 在H5中，拖拽是一个标准操作，任何元素都可以拖拽！！ 但是！！ 想要实现拖拽，需要添加 拖拽属性。

H5中拖拽属性：draggable： auto | true | false

注意：链接和图片默认是可拖动的，则不需要 draggable 属性。

- Drag（在拖拽目标时触发事件）

dragstart - 元素开始拖动时触发此事件

drag - 元素正在拖动时触发此事件

dragend - 元素拖动结束后触发此事件

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

dragenter - 当被拖动的元素进入目标区域内时触发此事件

dragover - 当被拖动的元素在目标区域内拖动时触发此事件

dragleave - 当被拖动的元素离开目标区域时触发此事件

drop - 当被拖动的元素在目标区域被放下时触发此事件

拖拽步骤

设置元素属性draggable 为 true：

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

拖动

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

letleft=document.getElementById('left')lettarget=document.getElementById('right')left.addEventListener('dragstart',(event)=>{consttarget=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')letdrag_id=event.dataTransfer.getData('text')target.appendChild(document.getElementById(drag_id))})完整代码

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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:1pxsolidlightseagreen;margin-right:10px;/*background-color:green;*/}.right{width:300px;height:500px;border:1pxsolidlightseagreen;text-align:center;padding:1px;/*background:red;*/}.txt{border:1pxsolidgray;margin:1px;padding:5px;cursor:move;}</style></head><body><mainclass="main"><divclass="left"id="left"><divclass="txt-show">左边区域</div><divclass="dargabletxt"id="txt1"draggable="true">可移动的文字一</div><divclass="dargabletxt"id="txt2"draggable="true">可移动的文字二</div><divclass="dargabletxt"id="txt3"draggable="true">可移动的文字三</div><divclass="dargabletxt"id="txt4"draggable="true">可移动的文字四</div><divclass="dargabletxt"id="txt5"draggable="true">可移动的文字五</div></div><divclass="right"id="right"><divclass="txt-show">右边区域</div></div></main><script>letleft=document.getElementById('left')lettarget=document.getElementById('right')left.addEventListener('dragstart',(event)=>{event.dataTransfer.setData('Text',target.id)console.log('drag开始拖动啦1');})target.addEventListener('dragstart',(event)=>{consttarget=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)=>{letdrag_id=event.dataTransfer.getData('text')target.appendChild(document.getElementById(drag_id))})left.addEventListener('drop',(event)=>{letdrag_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怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！