拖拽事件

　　通過拖放事件，可以控制拖放相關的各個方面。其中最關鍵的地方是確定哪里發生了拖放事件。有些事件是在被拖動的元素上觸發的，有些事件是在放置目標上觸發的。拖動某元素時，將依次觸發下列事件：（1），dragstart事件；（2），drag事件；（3），dragend事件。

　　按下鼠標鍵并開始移動鼠標的時候，會在被拖拽的元素上觸發dragstart事件。這時候光標變成”不能放”符號(圓環中有一條反斜線)，表示不能把元素放在自己上門。拖拽開始時，可以通過ondragstart事件處理程序運行JavaScript代碼。

　　觸發dragstart事件后，隨即會觸發drag事件，而在元素被拖動期間會持續觸發drag事件。這個事件與mousemove和touchmove事件類似。當拖動停止時(無論把元素放到了有效的放置目標，還是放到了無效的放置目標上)，都會發生dragend事件。

　　上面說的三個事件的目標都是被拖動的元素觸發。默認情況下，瀏覽器不會再拖動期間改變被拖動元素的外觀。但是可以自行修改。不過，大多數瀏覽器會為正被拖動的元素創建一個半透明的副本，這個副本始終跟隨光標移動。

當某個元素被拖動到一個有效的放置目標的時候，會觸發的事件有：（1），dragenter事件；（2），dragover事件；（3），dragleave或者drop事件。

　　只要有元素被拖動到放置目標上，就會觸發dragenter事件(類似于mouseover事件)。緊隨其后的是dragover事件，而且在被拖動的元素還在放置目標的范圍內移動是，會連續觸發dragover事件。如果元素被拖出放置目標，dragover事件不再發生，但是會觸發dragleave事件(類似于mouseout事件)。如果元素被放到了放置目標中會觸發drop事件而不是dragleave事件。dragenter事件、dragover事件和dragleave或者drop事件的目標都是作為放置目標的元素。

　　自定義放置目標

　　在拖動元素經過某些無效放置目標的時候，可以看到一種特殊鼠標手勢(圓環中一條反斜線)，表示不能放置。雖然所有元素都支持放置目標事件，但是這些元素默認是不允許放置的。如果拖動元素經過不允許放置的元素，無論用戶如何操作，都不會發生drop事件。不過，你可以把任何元素變成有效的放置目標，方法是重寫dragenter和dragover事件的默認行為。

　　重寫了默認行為之后，就會發現當拖動著元素移動到放置目標上的時候，光標變成允許放置的符號。在Firefox 3.5+中，放置事件的默認行為是打開被放到放置目標上的url。如果是把圖像拖到放置目標上，頁面就會轉向圖像文件。如果是把文本拖放到放置目標上，則會導致無效url錯誤。所以為了讓Firefox支持政正常的拖放，還要取消drop事件的默認行為，阻止打開拖拽元素的URL。

dataTransfer對象

但是只有簡單的拖放而沒有數據變化是沒有什么用的。為了在拖放操作時實現數據交換，IE5引入了dataTransfer對象，它是事件對象的一個屬性，用于從被拖放元素向放置目標傳遞字符串格式的數據。因為它是事件對象的屬性，所以只能在拖放事件的事件處理程序中訪問dataTransfer對象。在事件處理程序中，可以使用這個對象的屬性和方法來完善拖放功能，目前HTML5規范草案也收入了dataTransfer對象。

dataTransfer對象有兩個主要方法：getData()和setData()。不難想象，getData()可以取得setData()保存的值，setData()方法的第一個參數，也是getData()方法唯一的一個參數，是一個字符串，表示保存的數據類型，取值為‘text'或’URL‘。