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

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

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

代碼如下:

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

代碼如下:

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

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

代碼如下:

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

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

代碼如下:

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

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

代碼如下:

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

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

代碼如下:

dropEffect：設置或獲取拖動的目標上允許的操作以及相關的鼠標形狀。

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

代碼如下:

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

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

代碼如下:

dragstart：要被拖拽的元素開始拖拽時觸發(fā)，這個事件對象是被拖拽元素。
drag:拖拽元素時觸發(fā)，這個事件對象是被拖拽元素。
dragenter：拖拽元素進入目標元素時觸發(fā)，這個事件對象是目標元素。
dragover：拖拽某元素在目標元素上移動時觸發(fā)，這個事件對象是目標元素。
dragleave：拖拽某元素離開目標元素時觸發(fā)，這個事件對象是目標元素。
drop：將被拖拽元素放在目標元素內時觸發(fā)，這個事件對象是目標元素。
dragend：在drop之后觸發(fā)，就是拖拽完畢時觸發(fā)，這個事件對象是被拖拽元素。

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

代碼如下:

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();
}