設置元素可以拖放
設置元素可以拖放用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鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
新聞熱點
疑難解答
