HTML5拖放Drag的方法

這篇文章主要介紹“HTML5拖放Drag的方法”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“HTML5拖放Drag的方法”文章能幫助大家解決問題。

1. 基本的JavaScript原生實現

通過原生的JavaScript 代碼實現拖放行為非常復雜， 需要使用DOM 事件模型里的mousedown、mousemove和mouseup事件，還需要不斷獲得鼠標坐標，修改元素的坐標位置，性能會成為很大問題。另外，實現時還需要考慮瀏覽器兼容性問題，并且不支持瀏覽器頁面以外的拖放行為。

2. JavaScript庫

jQuery等JavaScript庫提供了封裝好的拖放處理，解決了JavaScript原生實現的復雜性和兼容性問題。但是這些JavaScript庫為了保證兼容性進行了復雜的計算和處理，使用了大量的代碼，造成庫的體積過大，影響頁面的加載速度，增大了網絡流量。

Drag & Drop API 的優點

使用Drag & Drop API，可以給我們帶來如下好處。

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

? 用原生方式取代JavaScript代碼的方式也大大減少了頁面的大小，讓用戶能更快地打開頁面，減少帶寬請求。

? 它提供了dataTransfer接口來存儲數據，允許我們定義拖放時的效果，此外還支持自定義拖放操作。

? 它支持瀏覽器頁面以外的拖放行為，例如從桌面拖放一個文件到瀏覽器頁面里，這在以前是不可能實現的。

Drag & Drop API 的主要操作

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

1. 主要事件

下面是拖放的相關事件，按照拖放的過程分為7個。

? dragstart。拖動開始的事件，需綁定在拖曳對象上。

? drag。從dragstart開始后到dragend結束前，在拖動時這個事件不斷出現，需綁定在拖曳對象上。

? dragend。拖動結束的事件，需綁定在拖曳對象上。

? dragenter。拖到當前元素區域內的事件，需綁定在推曳對象所拖曳的對象上。

? dragover。拖到當前元素的區域上的事件，這個事件在拖動過程中不斷被觸發，需綁定在拖曳對象正拖曳到的對象上。

? dragleave。拖出當前元素區域的事件，需綁定在拖曳對象剛剛拖曳到的對象上。

? drop。在當前元素區域停止拖曳的事件，需綁定在拖曳對象所放置到的對象上。

一個完整的拖放事件過程如下圖所示，我們可以輕松地使用上面的事件來處理復雜的拖放行為。

一個完整的HTML5拖放事件過程

2. 相關屬性

默認情況下，img和a標簽可以進行拖放。如果其他類型的節點也需要支持拖動，必須添加屬性draggable="true"。

使一個元素支持拖動其實非常簡單，第一要為此元素設置draggable屬性，第二需要為它的dragstart事件添加函數來處理拖曳數據。

Drag & Drop API還有一個dropzone屬性，用于設置放置目標區域所允許的文件類型和反饋方式，例如用move s:text/plain表示展現數據移動的效果和接受任何文本的放置，用copy f:image/png表示展現數據復制的效果和接受png格式圖片的放置。

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

3.主要接口

HTML5 使用dataTransfer 接口來支持拖放數據存儲， 它的使用方式一般為event.dataTransfer。dataTransfer對象不僅可以用來傳遞數據，還可以用來指定拖曳對象和放置對象所表現的反饋效果，它包含以下屬性和方法。

? dataTransfer.effectAllowed[=value]。

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

可以設置的值如下表所示，其默認值為uninitialized。

dropEffect屬性的值及描述：

dropEffect屬性的值及描述

這個屬性可以在拖曳對象的dragstart事件處理函數中設置，例如下面的代碼示例：

dragElement.ondragstart = function(e){

var dt = e.dataTransfer;

dt.effectAllowed = 'link';

};

? dataTransfer.dropEffect[=value]。

該屬性返回已設置的拖放時反饋效果。

作為方法時，可以設置拖放對象時表現什么樣的反饋效果，包含如下值：none、copy、link和 move，這幾個值分別代表拖曳對象不能放置在此處、拖曳對象移動到放置對象、拖曳對象被復制到放置對象、拖曳對象被鏈接到放置對象4種效果。

這4種效果表現為不同的鼠標形狀，如下圖3-5所示。

不同的鼠標形狀

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

dropElement.ondragover = function(e){

var dt = e.dataTransfer;

dt.dropEffect = 'link';

e.preventDefault();

};

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

? dataTransfer.items。返回一個關于拖曳數據的DataTransferItemList對象。

? dataTransfer.setDragImage(element, x, y)。指定拖曳元素時隨鼠標移動的圖片，x、y分別是圖片相對于鼠標的橫坐標和縱坐標。

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

? dataTransfer.types。返回在dragstart事件觸發時為元素存儲數據的格式。如果是系統文件的拖曳，則返回files。

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

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

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

? dataTransfer.files。如果是拖曳系統文件，返回正在被拖曳的文件列表對象。可以通過它獲得所拖曳的文件數據。

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

文件拖放上傳實例

下面的代碼清單是一個JavaScript代碼示例，演示了如何將一個元素拖放到另一個元素上，并且在鼠標放下時改變放置目標元素的狀態。

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

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

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

dragElement.ondragstart = function(e){

var dt = e.dataTransfer;

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

};

dropElement.ondragover = function(e){

e.preventDefault();

}

dropElement.ondrop = function(){

dropElement.innerHTML = '拖曳結束'; //改變放置目標元素的狀態

}

dropElement.ondragenter = function(e){

var dt = e.dataTransfer;

dt.dropEffect = 'link';

e.preventDefault();

};

可能犯的一個錯誤

創建拖放事件監聽程序時，一定要阻止默認行為，尤其是在dragover事件中一定要執行preventDefault()，否則drop事件不會被觸發，同時dropEffect也不會生效。

下面是正確的代碼：

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

e.preventDefault();

}, false);

請注意，dragstart事件里不能阻止默認行為，否則拖曳行為就不會發生。

關于“HTML5拖放Drag的方法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。