HTML5拖放事件
拖放是在“拖放源”和“拖放目標”之間傳輸數據的用戶界面，它可以存在相同應用之間也可以是不同應用之間。
拖放源：任何有HTML draggable屬性的文檔元素都是拖放源，如下所示，每個li都是一個拖放源：
拖放源涉及到三個事件，如下
當用戶開始用鼠標在拖放源上拖到時，瀏覽器并沒有選擇元素內容，相反，它再這個元素上出發datastart事件，這個事件的處理程序就調用dataTransfer.setData()指定當前可用的拖放源數據。
當用戶在拖放開始和結束之間時，就會觸發drag事件。
此處需要注意：很多同學會將drag事件和鼠標事件對比，會誤以為drag事件和mousemove事件效果一樣，其實不是這樣子的，drag事件是連續觸發，及時在短時間內沒有拖動，也會改變，但是mousemove當鼠標不移動時不會有變化。
當用戶拖放結束時，觸發dragend事件。
如下所示，通過顏色變化來體現執行不同事件：
拖放目標：任何文檔都可以是拖放目標，這不需要像拖放源一樣設置HTML屬性，只需要簡單的定義合適的事件即可。
拖放目標涉及到四個事件，拖放目標應可使用dataTransfer.types屬性確定拖放對象的可用數據是否是它能理解的格式。如下：
當拖放對象進入文檔元素時，瀏覽器在這個元素上觸發dragenter事件。
當拖放對象在拖放目標中停留時觸發dragover事件。
當用戶移動拖放離開拖放目標時，觸發dragleave事件
此處需要注意的是dragenter和dragleave事件會冒泡，入果拖放目標每部有嵌套元素，想知道dragleave事件表示拖放對象從拖放目標離開到目標外的事件還是到目標內的事件非常困難。
最后，如果用戶把拖放對象放置到拖放目標上時，在拖放目標上會觸發drop事件，需要注意的是，當dragover事件中禁止了默認事件后，drop事件才可以成功觸發，否則不可以。這個事件的處理程序應使用dataTransfer.getData()獲取傳輸數據并做一些適當的處理。
另外，如果用戶在拖放目標放置一或多個文件，dataTransfer.files屬性將是一個類數組的file對象。
oMark.ondragenter=function(ev){ //給拖放目標添加dragenter事件var ev=window.event||ev;this.style.backgroundColor="green"; } oMark.ondragover=function(ev){ //給拖放目標添加dragover事件var ev=window.event||ev;ev.preventDefault(); //阻止默認事件this.style.backgroundColor="pink"; } oMark.ondragleave=function(){ //給拖放目標添加dragleave事件this.style.backgroundColor="orange";} oMark.ondrop=function(ev){ //給拖放目標添加drop事件this.style.backgroundColor="black";if(ev.dataTransfer.types=="name"){ //使用dataTransfer.types屬性確定拖放對象的可用數據是否是它能理解的格式,此處為setData()中設置的key值alert(true);}}下面是整個例子：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>drag</title><style>#list li{border:1px solid #000;width:100px;height:20px;background-color:yellow;margin-bottom:10px;list-style:none;text-align:center;}#mark{width:200px;height:200px;border:1px solid #000;background-color:red;margin-left:300px;margin-top:300px;}</style> </head> <body><ul id="list"><li draggable="true">A</li><li draggable="true">B</li><li draggable="true">C</li><li draggable="true">D</li></ul><div id="mark"></div><script>window.onload=function(){var oUl=document.getElementById('list');var oLi=oUl.getElementsByTagName('li');var oMark=document.getElementById('mark');var liLen=oLi.length;for(var i=0; i<liLen; i++){oLi[i].ondragstart=function(ev){var ev=window.event||ev;ev.dataTransfer.setData('name','1');ev.dataTransfer.effectAllowed='link';ev.dataTransfer.setDragImage(oMark,50,50);this.style.backgroundColor="green";}oLi[i].ondrag=function(){//this.style.backgroundColor="red";}oLi[i].ondragend=function(){this.style.backgroundColor="yellow";}}oMark.ondragenter=function(ev){var ev=window.event||ev;this.style.backgroundColor="green";}oMark.ondragover=function(ev){var ev=window.event||ev;ev.preventDefault();this.style.backgroundColor="pink";}oMark.ondragleave=function(){this.style.backgroundColor="orange";}oMark.ondrop=function(ev){this.style.backgroundColor="black";if(ev.dataTransfer.types=="name"){alert(true);}}}</script> </body> </html>總結
- 上一篇： 张五常先生谈读书和思考的方法
- 下一篇： 一种h5前端和服务端通信的安全方案