本篇文章给大家分享的是有关Html5如何实现拖放，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

今天写一下html5的拖放问题。

设置元素可以拖放

设置元素可以拖放用draggable属性，设置为true。元素就可以拖放了。（注：火狐浏览器不支持）

拖拽元素事件

ondragstart：拖拽前触发

ondrag：拖拽中连续触发

ondragend：拖拽结束触发

目标元素事件

ondragenter：移入目标元素时触发

ondragover：移入目标元素后连续触发

ondragleave：离开目标元素触发

ondrop：在目标元素释放鼠标触发

事件的执行顺序

1、drop不触发的时候

dragstart>drag>dragenter>dragover>dragleave>dragend

2、drop触发的时候（dragover的时候阻止默认事件）

dragstart>drag>dragenter>dragover>drop>dragend

解决火狐下的问题

必须设置 dataTransfer对象才可以拖拽图片外的其他标签

setData（）：设置数据key和value（必须是字符串）

getData（）：获取数据，根据key值，获取相应的value

offctAllowed：设置光标样式

setDragImage：设置拖拽样式，三个参数：指定的元素、坐标X、坐标y

拖拽元素事件具体代码：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">div{width: 200px;height: 200px;background: red;}</style> </head> <body> <div draggable="true"></div> <script type="text/javascript">//获取元素var oDiv = document.querySelector('div');//开始拖拽时元素变为绿色oDiv.ondragstart = function(){console.log('开始拖拽时触发')oDiv.style.background = 'green';}//拖拽结束变为红色oDiv.ondragend = function(){console.log('拖拽结束触发');oDiv.style.background = 'red'}oDiv.ondrag = function(){console.log('拖拽时连续触发');}</script> </body> </html>

目标元素事件具体代码：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">#div1{width: 100px;height: 100px;background: red;}#div2{width: 200px;height: 200px;border: solid 1px;}</style> </head> <body> <div id="div1" draggable="true"></div> <div id="div2"></div> <script type="text/javascript">//获取元素var oDiv1 = document.querySelector("#div1");var oDiv2 = document.querySelector("#div2");//目标元素事件oDiv2.ondragenter = function(){console.log('移入目标元素触发')oDiv2.style.borderColor = 'blue'}oDiv2.ondragleave = function(){console.log('移除目标元素触发')oDiv2.style.borderColor = 'black'}oDiv2.ondragover = function(ev){console.log('移入到目标元素后连续触发');var event = window.event || ev;//阻止默认事件event.preventDefault()}//要想触发ondrop事件，必须在ondragover事件中阻止默认事件oDiv2.ondrop = function(){console.log('在目标元素中释放拖放元素触发')oDiv2.appendChild(oDiv1)}</script> </body> </html>

解决火狐浏览器的拖放问题具体代码：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">li{list-style: none;width: 100px;height: 40px;margin-top: 10px;background: orange;}div{width: 200px;height: 200px;background: red;margin: 0 auto;}</style> </head> <body> <ul> <li draggable="true">1</li> <li draggable="true">2</li> <li draggable="true">3</li> </ul> <div></div> <script type="text/javascript">var aLi = document.querySelectorAll("li");//目标元素事件var oDiv = document.querySelector("div");//拖放元素事件//解决火狐浏览器拖放问题:在开始拖放时设置setData()方法for(var i=0;i<aLi.length;i++){//添加属性，存储下标aLi[i].index = i;aLi[i].ondragstart = function(ev){var event = window.event || ev;event.dataTransfer.setData('test',this.index+1)//设置光标样式event.dataTransfer.effectAllowed = 'uninitialized';//设置拖拽样式event.dataTransfer.setDragImage(oDiv,100,100)}}oDiv.ondragover = function(ev){var event = window.event || ev;event.preventDefault();}//释放元素时弹框oDiv.ondrop = function(ev){var event = window.event || ev;var value = event.dataTransfer.getData('test','张三')alert(value)}</script> </body> </html>

以上就是Html5如何实现拖放，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。