HTML5中如何實(shí)現(xiàn)拖放功能-創(chuàng)新互聯(lián)

這篇文章主要介紹了HTML5中如何實(shí)現(xiàn)拖放功能，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站長(zhǎng)期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為羅城企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)，羅城網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

一、什么是拖放

拖放就是通過鼠標(biāo)放在一個(gè)物體上，按住鼠標(biāo)不放就可以把一個(gè)物體托動(dòng)到另一個(gè)位置。其實(shí)我們平時(shí)一直都有接觸，如圖

HTML5中如何實(shí)現(xiàn)拖放功能

那么在網(wǎng)頁(yè)上其實(shí)也可以實(shí)現(xiàn)同樣效果的拖放功能，如圖

HTML5中如何實(shí)現(xiàn)拖放功能

那么，就讓我們來看看如何實(shí)現(xiàn)的吧

二、拖放事件

在IE4的時(shí)候，Js就可以實(shí)現(xiàn)拖放功能了，當(dāng)時(shí)只支持拖放圖像和一些文本。后來隨著IE版本的更新，拖放事件也在慢慢完善，HTML5就以IE的拖放功能制定了該規(guī)范，F(xiàn)irefox 3.5、Safari 3+、chrome以及它們之后的版本都支持了該功能。

默認(rèn)情況下，網(wǎng)頁(yè)中的圖像、鏈接和文本是可以拖動(dòng)的，而其余的元素若想要被拖動(dòng)，必須將draggable 屬性設(shè)置為true，這是HTML5規(guī)定的新屬性，用于設(shè)置元素是否能被拖動(dòng)。因此，圖像、鏈接、文本的draggable 屬性默認(rèn)為true，其余元素的draggable 屬性默認(rèn)為false

在實(shí)現(xiàn)拖放功能時(shí)有這樣兩個(gè)概念，分別是被拖動(dòng)元素和目標(biāo)元素，它們都有各自支持的事件，那么我們來了解一下

（1）被拖動(dòng)元素的事件

被拖動(dòng)元素所支持的事件如下表所示

事件	含義
dragstart	準(zhǔn)備拖動(dòng)被拖動(dòng)元素時(shí)觸發(fā)
drag	拖動(dòng)的過程中觸發(fā)（頻繁觸發(fā)）
dragend	拖動(dòng)結(jié)束時(shí)觸發(fā)

我們來用一個(gè)例子測(cè)試一下這三個(gè)事件




    
    
    Document

我們來看看測(cè)試效果

HTML5中如何實(shí)現(xiàn)拖放功能

（2）目標(biāo)元素的事件

在實(shí)現(xiàn)拖放功能的過程中，目標(biāo)元素上的事件有如下三個(gè)

事件	含義
dragenter	被拖放元素進(jìn)入目標(biāo)元素時(shí)觸發(fā)
dragover	被拖放元素在目標(biāo)元素內(nèi)時(shí)觸發(fā)（頻繁觸發(fā)）
dragleave	被拖動(dòng)元素離開目標(biāo)元素時(shí)觸發(fā)
drop	當(dāng)被拖動(dòng)元素被放到了目標(biāo)元素中時(shí)觸發(fā)

這里我要詳細(xì)講解一下這三個(gè)事件的觸發(fā)規(guī)則：

dragenter事件與mouseover 事件類似，那怎樣才算被拖放元素進(jìn)入目標(biāo)元素呢？經(jīng)過測(cè)試發(fā)現(xiàn)，當(dāng)被拖放元素的一半以上面積在目標(biāo)元素內(nèi)才算進(jìn)入了目標(biāo)元素
dragover事件比較特殊，當(dāng)拖放元素進(jìn)入目標(biāo)元素以后就會(huì)一直觸發(fā)，就跟你設(shè)置了一個(gè)無限循環(huán)的定時(shí)器一樣，即使你不移動(dòng)元素也會(huì)觸發(fā)，除非拖放事件結(jié)束或者被拖放元素離開目標(biāo)元素
dragleave事件 的其觸發(fā)條件正好與dragenter 事件相反，它是當(dāng)被拖放元素離開目標(biāo)元素時(shí)觸發(fā)，經(jīng)過測(cè)試，離開目標(biāo)元素的條件是：被拖放元素一半以上的面積離開目標(biāo)元素
drop事件 可以叫做放置目標(biāo)事件，它是當(dāng)被拖放元素放置到了目標(biāo)元素中時(shí)觸發(fā)。雖然任何元素都支持該事件，但是所有元素默認(rèn)都是不允許被放置的，所以在不做任何處理的情況下，該事件是不會(huì)觸發(fā)的

同樣的，我們來用具體的例子，先來體會(huì)一下前三個(gè)事件




    
    
    Document

我們來看看測(cè)試效果，這里你們要仔細(xì)看被拖放元素多少面積進(jìn)入或離開目標(biāo)元素時(shí)才觸發(fā)的對(duì)應(yīng)事件

那么最后我們?cè)賮韺⒁幌氯绾尾拍苡|發(fā)drop事件，只需要阻止dragenter事件 和dragover事件 的默認(rèn)行為即可。

值得注意的是，在我們沒有對(duì)drop事件 做處理之前，將被拖放元素拖動(dòng)到目標(biāo)元素中時(shí)，鼠標(biāo)樣式會(huì)變成禁止的樣式，如圖

而當(dāng)我們?cè)O(shè)置元素為可放置了以后，鼠標(biāo)樣式是這樣的。如圖

上面只是簡(jiǎn)簡(jiǎn)單單地實(shí)現(xiàn)了拖放功能，但并沒用利用該功能做出什么實(shí)際性的功能，這里我們介紹一個(gè)拖放事件中事件對(duì)象上的一個(gè)特別重要的屬性——dataTransfer

我們通過event.dataTransfer 來獲取該對(duì)象，其主要的作用就是從被拖放元素向目標(biāo)元素傳遞一個(gè)字符串?dāng)?shù)據(jù)

方法	含義
setData	設(shè)置字符串，并設(shè)置數(shù)據(jù)類型
getData	獲取對(duì)應(yīng)數(shù)據(jù)類型的字符串

setData() 方法接收兩個(gè)參數(shù)，第一個(gè)參數(shù)表示的是字符串的數(shù)據(jù)類型，HTML5規(guī)定了兩種數(shù)據(jù)類型，分別是text/plain 和text/uri-list，前者表示普通字符串，后者表示URL字符串；第二個(gè)參數(shù) 就是用于存放的字符串

getData() 方法只接收一個(gè)參數(shù)，即需要接收的字符串類型

在dataTransfer對(duì)象 上還有兩個(gè)比較常用的屬性，如下表所示

屬性	含義
dropEffect	被拖放元素的放置行為
effectAllowed	目標(biāo)元素支持的放置行為

首先說一下，這個(gè)兩個(gè)屬性需要搭配使用，它們決定了被拖放元素 和目標(biāo)元素 之間的關(guān)系的，當(dāng)設(shè)定好兩者的關(guān)系后，在進(jìn)行拖動(dòng)操作的時(shí)候，鼠標(biāo)會(huì)根據(jù)不同的關(guān)系顯示不同的樣式，除此之外，沒有別的特別的作用。

值	含義
none	默認(rèn)值。不能把拖動(dòng)的元素放在這里
move	應(yīng)該把拖動(dòng)的元素移動(dòng)到該目標(biāo)元素
copy	應(yīng)該把拖動(dòng)元素復(fù)制到該目標(biāo)元素
link	表示目標(biāo)元素會(huì)打開被拖放進(jìn)來的元素對(duì)應(yīng)的鏈接

【注意】：dropEffect 屬性必須在dragenter事件 中設(shè)置，否則無效

值	含義
uninitialized	被拖放元素沒有設(shè)置放置性為
none	被拖放元素不能有放置性為
copy	只允許值為 ‘copy’ 的 dropEffect 目標(biāo)元素
link	只允許值為 ‘link’ 的 dropEffect 目標(biāo)元素
move	只允許值為 ‘move’ 的 dropEffect 目標(biāo)元素
copyLink	只允許值為 ‘copy’ 和 ‘link’ 的 dropEffect 目標(biāo)元素
copymove	只允許值為 ‘copy’ 和 ‘move’ 的 dropEffect 目標(biāo)元素
linkMove	只允許值為 ‘link’ 和 ‘move’ 的 dropEffect 目標(biāo)元素
all	只允許任意值的 dropEffect 目標(biāo)元素

【注意】：effectAllowed 屬性必須在dragstart事件 中設(shè)置，否則無效

上面也說了，這兩個(gè)屬性基本上只是用來改變鼠標(biāo)樣式的，所以如果想實(shí)現(xiàn)特定的功能還得我們自己來重寫事件的處理函數(shù)。

因?yàn)槲谋臼悄J(rèn)支持的拖放元素，所以我們可以不對(duì)其做任何的事件綁定。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“HTML5中如何實(shí)現(xiàn)拖放功能”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

HTML5中如何實(shí)現(xiàn)拖放功能-創(chuàng)新互聯(lián)

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管