HTML5拖拽事件的講解

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

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

拖拽事件

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

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

　　觸發(fā)dragstart事件后，隨即會(huì)觸發(fā)drag事件，而在元素被拖動(dòng)期間會(huì)持續(xù)觸發(fā)drag事件。這個(gè)事件與mousemove和touchmove事件類似。當(dāng)拖動(dòng)停止時(shí)(無論把元素放到了有效的放置目標(biāo)，還是放到了無效的放置目標(biāo)上)，都會(huì)發(fā)生dragend事件。

　　上面說的三個(gè)事件的目標(biāo)都是被拖動(dòng)的元素觸發(fā)。默認(rèn)情況下，瀏覽器不會(huì)再拖動(dòng)期間改變被拖動(dòng)元素的外觀。但是可以自行修改。不過，大多數(shù)瀏覽器會(huì)為正被拖動(dòng)的元素創(chuàng)建一個(gè)半透明的副本，這個(gè)副本始終跟隨光標(biāo)移動(dòng)。當(dāng)某個(gè)元素被拖動(dòng)到一個(gè)有效的放置目標(biāo)的時(shí)候，會(huì)觸發(fā)的事件有：dragenter事件、dragover事件和dragleave或者drop事件。

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

自定義放置目標(biāo)

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

　　重寫了默認(rèn)行為之后，就會(huì)發(fā)現(xiàn)當(dāng)拖動(dòng)著元素移動(dòng)到放置目標(biāo)上的時(shí)候，光標(biāo)變成允許放置的符號(hào)。在Firefox 3.5+中，放置事件的默認(rèn)行為是打開被放到放置目標(biāo)上的url。如果是把圖像拖到放置目標(biāo)上，頁(yè)面就會(huì)轉(zhuǎn)向圖像文件。如果是把文本拖放到放置目標(biāo)上，則會(huì)導(dǎo)致無效url錯(cuò)誤。所以為了讓Firefox支持政正常的拖放，還要取消drop事件的默認(rèn)行為，阻止打開拖拽元素的URL。小例子如下

HTML代碼

　　CSS代碼

　　JavaScript代碼

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