一、拖放事件

1.任何元素都有一個draggable屬性，draggable=true就能拖動，拖動元素時依次觸發下列事件：

? ?(1)dragstart：按下鼠標并移動時，在被拖動元素上觸發；

? ?(2)drag：在元素被拖動時持續觸發；

? ?(3)dragend：拖動停止時觸發；

2.當元素被拖動到一個有效的放置目標時，依次觸發下列事件：

? ?(1)dragenter：元素被拖動到放置目標上觸發；

? ?(2)dragover：被拖動元素在放置目標范圍內移動時觸發；

? ?(3)drop：元素被放到放置目標中觸發；

二、自定義放置目標

當把元素拖動到無效的放置目標時，不會觸發drop事件。我們可以把任何元素變成有效的放置目標：

div.οndragenter=function(event){if (event.preventDefault){event.preventDefault();}else{event.returnValue=false;} }div.ondragover=function(event){if (event.preventDefault){event.preventDefault();}else{event.returnValue=false;} }//取消元素默認放置行為 div.οndrοp=function(event){if (event.preventDefault){event.preventDefault();}else{event.returnValue=false;} }

三、dataTransfer對象

dataTransfer對象是事件對象的屬性，有兩個主要方法：setData()、getData(),用法如下：

event.dataTransfer.setData("Text",event.target.id); var data=event.dataTransfer.getData("Text");

?

轉載于:https://www.cnblogs.com/lodadssd/p/6250497.html

總結

以上是生活随笔為你收集整理的拖放相关事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。