Html5拖放
阿新 • • 發佈：2017-06-12
執行順序 mage drag ack html func char 紅色 index
今天寫一下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拖放