HTML5拖拽事件的講解

本篇文章和大家了解一下HTML5拖拽事件。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

通過拖拽事件，咱們就可以控制拖拽很多東西了。其中什么元素或者是哪里發生了拖拽事件是最關鍵的。有些事件是在被拖動的元素上觸發，有些事件是在放置目標上觸發的。拖動某元素時候，觸發的事件有：

拖拽事件

　　通過拖拽事件，咱們就可以控制拖拽很多東西了。其中什么元素或者是哪里發生了拖拽事件是最關鍵的。有些事件是在被拖動的元素上觸發，有些事件是在放置目標上觸發的。拖動某元素時候，觸發的事件有：dragstart事件、drag事件和dragend事件。

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

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

　　上面說的三個事件的目標都是被拖動的元素觸發。默認情況下，瀏覽器不會再拖動期間改變被拖動元素的外觀。但是可以自行修改。不過，大多數瀏覽器會為正被拖動的元素創建一個半透明的副本，這個副本始終跟隨光標移動。當某個元素被拖動到一個有效的放置目標的時候，會觸發的事件有：dragenter事件、dragover事件和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。小例子如下

HTML代碼

　　CSS代碼

　　JavaScript代碼

以上就是HTML5拖拽事件的詳細內容了，看完之后是否有所收獲呢？如果想了解更多相關內容，歡迎來億速云行業資訊！