HTML5拖放Drag的方法

這篇文章主要介紹“HTML5拖放Drag的方法”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“HTML5拖放Drag的方法”文章能幫助大家解決問(wèn)題。

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),大祥企業(yè)網(wǎng)站建設(shè),大祥品牌網(wǎng)站建設(shè),網(wǎng)站定制,大祥網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,大祥網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

1. 基本的JavaScript原生實(shí)現(xiàn)

通過(guò)原生的JavaScript 代碼實(shí)現(xiàn)拖放行為非常復(fù)雜， 需要使用DOM 事件模型里的mousedown、mousemove和mouseup事件，還需要不斷獲得鼠標(biāo)坐標(biāo)，修改元素的坐標(biāo)位置，性能會(huì)成為很大問(wèn)題。另外，實(shí)現(xiàn)時(shí)還需要考慮瀏覽器兼容性問(wèn)題，并且不支持瀏覽器頁(yè)面以外的拖放行為。

2. JavaScript庫(kù)

jQuery等JavaScript庫(kù)提供了封裝好的拖放處理，解決了JavaScript原生實(shí)現(xiàn)的復(fù)雜性和兼容性問(wèn)題。但是這些JavaScript庫(kù)為了保證兼容性進(jìn)行了復(fù)雜的計(jì)算和處理，使用了大量的代碼，造成庫(kù)的體積過(guò)大，影響頁(yè)面的加載速度，增大了網(wǎng)絡(luò)流量。

Drag & Drop API 的優(yōu)點(diǎn)

使用Drag & Drop API，可以給我們帶來(lái)如下好處。

? 它通過(guò)事件的方式讓瀏覽器原生支持拖放行為，我們不再需要編寫復(fù)雜的JavaScript代碼，不再需要考慮千奇百怪的瀏覽器兼容性問(wèn)題。

? 用原生方式取代JavaScript代碼的方式也大大減少了頁(yè)面的大小，讓用戶能更快地打開(kāi)頁(yè)面，減少帶寬請(qǐng)求。

? 它提供了dataTransfer接口來(lái)存儲(chǔ)數(shù)據(jù)，允許我們定義拖放時(shí)的效果，此外還支持自定義拖放操作。

? 它支持瀏覽器頁(yè)面以外的拖放行為，例如從桌面拖放一個(gè)文件到瀏覽器頁(yè)面里，這在以前是不可能實(shí)現(xiàn)的。

Drag & Drop API 的主要操作

Drag & Drop API主要包含三方面的內(nèi)容：事件、屬性和接口，下面我們對(duì)它們一一進(jìn)行講解。

1. 主要事件

下面是拖放的相關(guān)事件，按照拖放的過(guò)程分為7個(gè)。

? dragstart。拖動(dòng)開(kāi)始的事件，需綁定在拖曳對(duì)象上。

? drag。從dragstart開(kāi)始后到dragend結(jié)束前，在拖動(dòng)時(shí)這個(gè)事件不斷出現(xiàn)，需綁定在拖曳對(duì)象上。

? dragend。拖動(dòng)結(jié)束的事件，需綁定在拖曳對(duì)象上。

? dragenter。拖到當(dāng)前元素區(qū)域內(nèi)的事件，需綁定在推曳對(duì)象所拖曳的對(duì)象上。

? dragover。拖到當(dāng)前元素的區(qū)域上的事件，這個(gè)事件在拖動(dòng)過(guò)程中不斷被觸發(fā)，需綁定在拖曳對(duì)象正拖曳到的對(duì)象上。

? dragleave。拖出當(dāng)前元素區(qū)域的事件，需綁定在拖曳對(duì)象剛剛拖曳到的對(duì)象上。

? drop。在當(dāng)前元素區(qū)域停止拖曳的事件，需綁定在拖曳對(duì)象所放置到的對(duì)象上。

一個(gè)完整的拖放事件過(guò)程如下圖所示，我們可以輕松地使用上面的事件來(lái)處理復(fù)雜的拖放行為。

一個(gè)完整的HTML5拖放事件過(guò)程

2. 相關(guān)屬性

默認(rèn)情況下，img和a標(biāo)簽可以進(jìn)行拖放。如果其他類型的節(jié)點(diǎn)也需要支持拖動(dòng)，必須添加屬性draggable="true"。

使一個(gè)元素支持拖動(dòng)其實(shí)非常簡(jiǎn)單，第一要為此元素設(shè)置draggable屬性，第二需要為它的dragstart事件添加函數(shù)來(lái)處理拖曳數(shù)據(jù)。

Drag & Drop API還有一個(gè)dropzone屬性，用于設(shè)置放置目標(biāo)區(qū)域所允許的文件類型和反饋方式，例如用move s:text/plain表示展現(xiàn)數(shù)據(jù)移動(dòng)的效果和接受任何文本的放置，用copy f:image/png表示展現(xiàn)數(shù)據(jù)復(fù)制的效果和接受png格式圖片的放置。

因此，要使一個(gè)元素允許其他拖曳元素放置到它之上，此元素必須要有dropzone屬性并且監(jiān)聽(tīng)drop事件（和上面元素支持拖曳的兩個(gè)條件非常相似）。不過(guò)，我們也可以采用為放置元素自定義事件處理的方式來(lái)代替dropzone屬性，這就需要我們?cè)赿ragenter事件里判斷此元素是否支持放置以及在dragover事件里指定為用戶顯示什么樣的反饋效果。

3.主要接口

HTML5 使用dataTransfer 接口來(lái)支持拖放數(shù)據(jù)存儲(chǔ)， 它的使用方式一般為event.dataTransfer。dataTransfer對(duì)象不僅可以用來(lái)傳遞數(shù)據(jù)，還可以用來(lái)指定拖曳對(duì)象和放置對(duì)象所表現(xiàn)的反饋效果，它包含以下屬性和方法。

? dataTransfer.effectAllowed[=value]。

該屬性返回拖曳對(duì)象允許的拖曳時(shí)的反饋效果。作為方法時(shí)，用于初始化dragenter和dragover事件時(shí)允許的dropEffect屬性，

可以設(shè)置的值如下表所示，其默認(rèn)值為uninitialized。

dropEffect屬性的值及描述：

dropEffect屬性的值及描述

這個(gè)屬性可以在拖曳對(duì)象的dragstart事件處理函數(shù)中設(shè)置，例如下面的代碼示例：

dragElement.ondragstart = function(e){

var dt = e.dataTransfer;

dt.effectAllowed = 'link';

};

? dataTransfer.dropEffect[=value]。

該屬性返回已設(shè)置的拖放時(shí)反饋效果。

作為方法時(shí)，可以設(shè)置拖放對(duì)象時(shí)表現(xiàn)什么樣的反饋效果，包含如下值：none、copy、link和 move，這幾個(gè)值分別代表拖曳對(duì)象不能放置在此處、拖曳對(duì)象移動(dòng)到放置對(duì)象、拖曳對(duì)象被復(fù)制到放置對(duì)象、拖曳對(duì)象被鏈接到放置對(duì)象4種效果。

這4種效果表現(xiàn)為不同的鼠標(biāo)形狀，如下圖3-5所示。

不同的鼠標(biāo)形狀

dropEffect的設(shè)置可以在放置對(duì)象的dragenter或者dragover事件處理函數(shù)中處理，如下面的代碼所示。

dropElement.ondragover = function(e){

var dt = e.dataTransfer;

dt.dropEffect = 'link';

e.preventDefault();

};

另外，如果該效果與起初設(shè)置的effect-Allowed效果不符，則拖放操作將會(huì)失敗。

? dataTransfer.items。返回一個(gè)關(guān)于拖曳數(shù)據(jù)的DataTransferItemList對(duì)象。

? dataTransfer.setDragImage(element, x, y)。指定拖曳元素時(shí)隨鼠標(biāo)移動(dòng)的圖片，x、y分別是圖片相對(duì)于鼠標(biāo)的橫坐標(biāo)和縱坐標(biāo)。

? dataTransfer.addElement(element)。將元素添加到被拖曳的列表里。如果你想讓某個(gè)元素跟隨被拖曳元素一同被拖曳，可以使用這個(gè)方法。

? dataTransfer.types。返回在dragstart事件觸發(fā)時(shí)為元素存儲(chǔ)數(shù)據(jù)的格式。如果是系統(tǒng)文件的拖曳，則返回files。

? dataTransfer.setData(format, data)。為元素添加數(shù)據(jù)，在dragstart事件觸發(fā)時(shí)可以用它為被拖曳元素存儲(chǔ)數(shù)據(jù)。setData的數(shù)據(jù)格式一般有兩種：text/plain（設(shè)置format為字符串text即可，主要用于文本數(shù)據(jù)）和text/uri-list（設(shè)置format為字符串url即可，主要用于url）。

? data=dataTransfer.getData(format)。返回存儲(chǔ)的數(shù)據(jù)。如果數(shù)據(jù)不存在，則返回空字符串。

? dataTransfer.clearData([format])。刪除指定格式的數(shù)據(jù)。如果不指定格式，則刪除所有數(shù)據(jù)。

? dataTransfer.files。如果是拖曳系統(tǒng)文件，返回正在被拖曳的文件列表對(duì)象。可以通過(guò)它獲得所拖曳的文件數(shù)據(jù)。

dataTransfer對(duì)象提供的屬性和方法使得我們自定義處理拖放操作成為可能。

文件拖放上傳實(shí)例

下面的代碼清單是一個(gè)JavaScript代碼示例，演示了如何將一個(gè)元素拖放到另一個(gè)元素上，并且在鼠標(biāo)放下時(shí)改變放置目標(biāo)元素的狀態(tài)。

var dragElement = document.getElementById('drag-element');

var dropElement = document.getElementById('drop-element');

dragElement.setAttribute('draggable', 'true'); //允許dragElement元素可以拖動(dòng)

dragElement.ondragstart = function(e){

var dt = e.dataTransfer;

dt.effectAllowed = 'link'; //設(shè)置反饋效果為鏈接形式

};

dropElement.ondragover = function(e){

e.preventDefault();

}

dropElement.ondrop = function(){

dropElement.innerHTML = '拖曳結(jié)束'; //改變放置目標(biāo)元素的狀態(tài)

}

dropElement.ondragenter = function(e){

var dt = e.dataTransfer;

dt.dropEffect = 'link';

e.preventDefault();

};

可能犯的一個(gè)錯(cuò)誤

創(chuàng)建拖放事件監(jiān)聽(tīng)程序時(shí)，一定要阻止默認(rèn)行為，尤其是在dragover事件中一定要執(zhí)行preventDefault()，否則drop事件不會(huì)被觸發(fā)，同時(shí)dropEffect也不會(huì)生效。

下面是正確的代碼：

dropElement.addEventListener('dragover', function(e){

e.preventDefault();

}, false);

請(qǐng)注意，dragstart事件里不能阻止默認(rèn)行為，否則拖曳行為就不會(huì)發(fā)生。

關(guān)于“HTML5拖放Drag的方法”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

網(wǎng)頁(yè)名稱：HTML5拖放Drag的方法
網(wǎng)頁(yè)路徑：http://www.muchs.cn/article10/ippggo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、響應(yīng)式網(wǎng)站、品牌網(wǎng)站制作、自適應(yīng)網(wǎng)站、域名注冊(cè)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)