這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)HTML5中Javascript API 拖拽的屬性是什么，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

堅(jiān)守“ 做人真誠 · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀，專業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都房屋鑒定小微創(chuàng)業(yè)公司專業(yè)提供成都企業(yè)網(wǎng)站定制營銷網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁布局、功能開發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。

拖拽(Drag/Drop)是個(gè)非常普遍的功能。你可以抓住一個(gè)對(duì)象，并且拖動(dòng)到你想放置的區(qū)域。很多javascript都類似實(shí)現(xiàn)了相關(guān)的功能，例如，jQueryUI的draganddrop組件。在HTML5中，拖拽(draganddrop)成為了標(biāo)準(zhǔn)操作，任何元素都支持。正因?yàn)檫@個(gè)功能太普遍了，所有的主流瀏覽器都支持這個(gè)操作。
啟用拖拽-draggable屬性
非常簡單，只需要將一個(gè)元素的拖動(dòng)屬性修改為draggable，這個(gè)元素就支持拖動(dòng)了，如下所示：

代碼如下:

拖動(dòng)中數(shù)據(jù)的傳遞
拖動(dòng)的過程中，我們往往需要傳遞相應(yīng)的邏輯數(shù)據(jù)來完成轉(zhuǎn)換的過程，這里主要是使用dataTransfer對(duì)象進(jìn)行數(shù)據(jù)傳遞，下面先看看它的成員：
方法成員：

代碼如下:

setData(format,data)：把被拖動(dòng)的數(shù)據(jù)賦值給dataTransfer對(duì)象。

format:一個(gè)String型參數(shù)，指定被拖動(dòng)數(shù)據(jù)的類型。該參數(shù)取值可以是“Text”(文本類型)和“URL”(URL類型)。該參數(shù)是大小寫無關(guān)的，所以傳入"text"與"Text"是一樣的。
data:一個(gè)變體類型參數(shù)，指定被拖動(dòng)的數(shù)據(jù)。該數(shù)據(jù)可以是文本，圖片路徑，URL等等。
該函數(shù)有Boolean類型的返回值，true表示數(shù)據(jù)成功加到dataTransfer中，false代表不成功。如果需要，可以通過這個(gè)參數(shù)來決定是否應(yīng)該繼續(xù)執(zhí)行某些邏輯。

代碼如下:

getData(format)：獲取dataTransfer中存放的拖動(dòng)數(shù)據(jù)。

format意義與setData中的一樣，取值可以是"Text"(文本類型)和"URL"(URL類型)。

代碼如下:

clearData(format)：移除指定類型的數(shù)據(jù)。

這里的format除了上面可以指定的"Text"(文本類型)和"URL"(URL類型)外，還可以取下列值：file-文件，html-html元素，image-圖片。
這個(gè)方法可以用于去選擇性的處理拖動(dòng)的數(shù)據(jù)類型。
屬性成員：

代碼如下:

effectAllowed：設(shè)置或獲取數(shù)據(jù)源元素中的數(shù)據(jù)可以執(zhí)行的操作。

屬性類型為字符串，取值范圍如下：
"copy"-復(fù)制數(shù)據(jù).
"link"-鏈接數(shù)據(jù).
"move"-移動(dòng)數(shù)據(jù)
"copyLink"-復(fù)制或鏈接數(shù)據(jù)，由目標(biāo)對(duì)象來確定。
"copyMove"-復(fù)制或移動(dòng)數(shù)據(jù)，由目標(biāo)對(duì)象來確定。
"linkMove"-鏈接或移動(dòng)數(shù)據(jù)，由目標(biāo)對(duì)象來確定。
"all"-所有的操作都是支持的。
"none"-禁止拖動(dòng)。
"uninitialized"-默認(rèn)值，采用默認(rèn)的行為。
注意設(shè)置effectAllowed為none以后，拖動(dòng)是禁止的，但是鼠標(biāo)形狀還是顯示沒有可拖動(dòng)的對(duì)象的形狀，如果想不顯示這個(gè)鼠標(biāo)形狀，則需要將window的event事件的屬性returnValue設(shè)置為false。

代碼如下:

dropEffect：設(shè)置或獲取拖動(dòng)的目標(biāo)上允許的操作以及相關(guān)的鼠標(biāo)形狀。

屬性類型為字符串，取值范圍如下：
"copy"-鼠標(biāo)顯示為復(fù)制時(shí)的形狀；
"link"-鼠標(biāo)顯示為連接的形狀；
"move"-鼠標(biāo)顯示為移動(dòng)的形狀。
"none"(默認(rèn)值)-鼠標(biāo)顯示為沒有拖動(dòng)的形狀。
effectAllowed指定了數(shù)據(jù)源支持的操作，所以通常在ondragstart事件中指定。dropEffect指定了拖動(dòng)放置的目標(biāo)支持的操作，所以與effectAllowed配合，通常在拖動(dòng)的目標(biāo)上的ondragenter,ondragover和ondrop等事件中使用。

代碼如下:

files：返回拖動(dòng)的文件的列表FileList。
types：ondragstart中發(fā)送的數(shù)據(jù)(被拖動(dòng)的數(shù)據(jù))類型的列表。

dataTransfer對(duì)象的存在，使得在拖動(dòng)的數(shù)據(jù)源和目標(biāo)元素之間傳遞邏輯數(shù)據(jù)變成了可能。通常我們使用setData方法在數(shù)據(jù)源元素的ondragstart事件中提供數(shù)據(jù)，然后再目標(biāo)元素中，使用getData方法獲取數(shù)據(jù)。
拖動(dòng)中觸發(fā)的事件
下面是一次拖拽會(huì)發(fā)生的事件，基本上事件的觸發(fā)順序也就是下面的順序：

代碼如下:

dragstart：要被拖拽的元素開始拖拽時(shí)觸發(fā)，這個(gè)事件對(duì)象是被拖拽元素。
drag:拖拽元素時(shí)觸發(fā)，這個(gè)事件對(duì)象是被拖拽元素。
dragenter：拖拽元素進(jìn)入目標(biāo)元素時(shí)觸發(fā)，這個(gè)事件對(duì)象是目標(biāo)元素。
dragover：拖拽某元素在目標(biāo)元素上移動(dòng)時(shí)觸發(fā)，這個(gè)事件對(duì)象是目標(biāo)元素。
dragleave：拖拽某元素離開目標(biāo)元素時(shí)觸發(fā)，這個(gè)事件對(duì)象是目標(biāo)元素。
drop：將被拖拽元素放在目標(biāo)元素內(nèi)時(shí)觸發(fā)，這個(gè)事件對(duì)象是目標(biāo)元素。
dragend：在drop之后觸發(fā)，就是拖拽完畢時(shí)觸發(fā)，這個(gè)事件對(duì)象是被拖拽元素。

基本上事件的參數(shù)event都會(huì)傳入相關(guān)的元素，可以很方便的進(jìn)行一些修改。這里，我們并不需要處理每個(gè)事件，通常只需要掛接主要的幾個(gè)事件即可。
拖動(dòng)開始-ondragstart事件
從這個(gè)事件傳入的參數(shù)含有的信息非常豐富，從中可以很方便的獲取到被拖動(dòng)的元素(event.Target)；從中可以設(shè)置被拖動(dòng)數(shù)據(jù)(event.dataTransfer.setData)；所以你可以很方便實(shí)現(xiàn)拖動(dòng)的背后邏輯(當(dāng)然你綁定的時(shí)候也可以傳遞其他的參數(shù))。
拖動(dòng)過程中-ondrag，ondragover，ondragenter和ondragleave事件
ondrag事件的對(duì)象是被拖拽元素，通常這個(gè)事件處理的比較少。ondragenter事件是當(dāng)拖動(dòng)進(jìn)入當(dāng)前元素時(shí)發(fā)生，ondragleave事件是在當(dāng)拖動(dòng)離開當(dāng)前元素時(shí)發(fā)生，ondragover事件是在拖動(dòng)在當(dāng)前元素中移動(dòng)時(shí)發(fā)生。
這里只需要注意一點(diǎn)，因?yàn)槟J(rèn)情況下，瀏覽器是禁止元素drop的，所以為了讓元素可以drop，需要在這個(gè)函數(shù)中返回false或者調(diào)用event.preventDefault()方法。如下面的例子所示。
拖動(dòng)結(jié)束-ondrop，ondragend事件
當(dāng)可拖動(dòng)的數(shù)據(jù)被drop的時(shí)候，drop事件觸發(fā)。drop結(jié)束后，dragend事件被觸發(fā)，這個(gè)事件使用的也相對(duì)少一點(diǎn)。
看一個(gè)簡單的例子：

代碼如下:

functionallowDrop(ev){
ev.preventDefault();
}
functiondrag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
functiondrop(ev){
vardata=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}