HTML5拖拽事件的講解

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

十年的海門(mén)網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整海門(mén)建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)公司從事“海門(mén)網(wǎng)站設(shè)計(jì)”,“海門(mén)網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

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

拖拽事件

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

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

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

上面說(shuō)的三個(gè)事件的目標(biāo)都是被拖動(dòng)的元素觸發(fā)。默認(rèn)情況下，瀏覽器不會(huì)再拖動(dòng)期間改變被拖動(dòng)元素的外觀。但是可以自行修改。不過(guò)，大多數(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事件(類(lèi)似于mouseover事件)。緊隨其后的是dragover事件，而且在被拖動(dòng)的元素還在放置目標(biāo)的范圍內(nèi)移動(dòng)是，會(huì)連續(xù)觸發(fā)dragover事件。如果元素被拖出放置目標(biāo)，dragover事件不再發(fā)生，但是會(huì)觸發(fā)dragleave事件(類(lèi)似于mouseout事件)。如果元素被放到了放置目標(biāo)中會(huì)觸發(fā)drop事件而不是dragleave事件。dragenter事件、dragover事件和dragleave或者drop事件的目標(biāo)都是作為放置目標(biāo)的元素。

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

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

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

HTML代碼

HTML5拖拽事件的講解