本篇文章给大家分享的是有关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如何实现拖放，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注天达云行业资讯频道。