HTML5 拖放事件及對象

一、簡介

HTML5 中提供了直接拖放的 API，極大的友善我們實作拖放效果，隻需要通過監聽元素的拖放事件就能實作各種拖放功能。想要拖放某個元素，必須設定該元素的 draggable 屬性為 true，當該屬性為 false 時，将不允許拖放。而 img 元素和 a 元素都預設設定了draggable 屬性為 true， 可直接拖放， 如果不想拖放這兩個元素， 把屬性設為 false 即可。

二、拖放事件

拖放事件由不同的元素産生，一個元素被拖放，他可能會經過很多個元素上，最終到達想要放置的元素内，這裡把被拖放的元素稱為源對象，被經過的元素稱為過程對象，到達的元素稱為目标對象，不同的對象産生不同的拖放事件。

（1）源對象：

dragstart：源對象開始拖放，開始移動被拖拽元素時觸發（主體是被拖拽元素）

drag：源對象拖放過程中，移動被拖拽元素時觸發（主體是被拖拽元素）

dragend：源對象拖放結束，整個拖放操作結束時觸發（主體是被拖拽元素）

（2）過程對象：

dragenter：源對象開始進入過程對象範圍内，被拖拽元素進入目标元素時觸發（主體

是目标元素）

dragover：源對象在過程對象範圍内移動，被拖拽元素在目标元素内移動時觸發（主

體是目标元素）

dragleave：源對象離開過程對象的範圍，被拖拽元素離開目标元素時觸發（主體是目

标元素）

（3）目标對象：

drop：源對象被拖放到目标對象内，目标元素完全接受被拖拽元素時觸發（主體是目

标元素）

三、dataTransfer 對象

在所有拖放事件中提供了一個資料傳遞對象 dataTransfer，用于在源對象和目标對象間傳遞資料。它包含了一些方法及屬性。包括了 setData()、getData()、clearData()方法來操作拖拽過程中傳遞的資料，setDragImage(）方法來設定拖拽時滑鼠的下面的圖檔（預設為被拖拽元素），effectAllowed 和 dropEffect 屬性來設定拖放效果。

（1）setData(format, data)

 設定拖拽事件中傳遞的資料，format 參數為資料類型

 該方法向 dataTransfer 對象中存入資料，接收兩個參數，第一個表示要存入資料種類

的字元串，現在支援有以下幾種：

①text/plain：文本文字

②text/html：HTML 文字

③text/xml：XML 文字

④text/uri-list：URL 清單，每個 URL 為一行

 第二個參數為要存入的資料。例如：

event.dataTransfer.setData(‘text/plain’,’Hello World’);

（2）getData(format)

 獲拖拽事件中傳遞的資料，format 參數為資料類型

 該方法從 dataTransfer 對象中讀取資料，參數為在 setData 中指定的資料種類，例如：

event.dataTransfer.getData(‘text/plain’);

（3）clearData()

 清除拖拽事件中傳遞的資料

 該方法清除 dataTransfer 對象中存放的資料，參數可選，為資料種類。若參數為空，

則清空所有種類的資料，例如：

event.dataTransfer.clearData();

（4）setDragImage(element, x, y)

 該方法通過用 img 元素來設定拖放圖示

 其中 element 表示拖拽時滑鼠下面的圖檔，x 表示圖示距離滑鼠指針的 x 軸方向的偏

移值，y 表示圖示距離滑鼠指針 y 軸方向的偏移值，例如：

var source = document.getElementById('source'),
icon = document.createElement('img');
icon.src = 'img.png';
source.addEventListener('dragstart',function(ev){
ev.dataTransfer.setDragImage(icon,-,-)
},false)
           

（5）files 屬性

傳回被拖拽的 FileList（檔案清單），相當于它是使用者拖拽進浏覽器的檔案清單，是個

FileList 對象，有 length 屬性，可 以通過下标通路。

（6）effectAllowed 和 dropEffect

①effectAllowed

設定或擷取資料傳送操作可應用于該對象的源元素

②dropEffect

設定或擷取拖曳操作的類型和要顯示的光标類型

詳細說明：

effectAllowed 和 dropEffect 最主要的作用是， 用于配置拖拽操作過程中滑鼠指針的類型

以便提示使用者後續可執行怎樣的操作；其次的作用是，控制 drop 事件的觸發與否

①dropEffect

 作用：用于設定目标元素将執行的操作，若屬性值屬于 effectAllowed 範圍内，則鼠

标指針将顯示對應的指針樣式，否則則顯示禁止的指針樣式

取值範圍：

 copy ：被拖拽元素将被複制到目标元素内，若屬于 effectAllowed 範圍内時，則鼠

标指針顯示複制的樣式，否則則顯示禁止的指針樣式

 link ：被拖拽元素将以超連結的形式打開資源，若屬于 effectAllowed 範圍内時，則

滑鼠指針顯示超連結的樣式，否則則顯示禁止的指針樣式

 move ：被拖拽元素将被移動到目标元素内，若屬于 effectAllowed 範圍内時，則鼠

标指針顯示移動的樣式，否則則顯示禁止的指針樣式

 none ：被拖拽元素不能在目标元素上作任何操作，一直顯示禁止的指針樣式，除了文

本框外其他元素的預設值均為 none

 注意：

1. 僅能在 dragover 事件中設定該屬性值，其他事件中設定均無效

2. 當顯示禁止的指針樣式時，将無法觸發目标元素的 drop 事件

②effectAllowed

 作用：用于設定被拖拽元素可執行的操作。

取值範圍：

 copy ，限定 dropEffect 的屬性值為 copy，否則會滑鼠指針為禁止樣式

 link ，限定 dropEffect 的屬性值為 link，否則會滑鼠指針為禁止樣式

 move ，限定 dropEffect 的屬性值為 move，否則會滑鼠指針為禁止樣式

 copyLink ，限定 dropEffect 的屬性值為 copy 和 link，否則會滑鼠指針為禁止樣式

 copyMove ，限定 dropEffect 的屬性值為 copy 和 move，否則會滑鼠指針為禁止樣式

 linkMove ，限定 dropEffect 的屬性值為 link 和 move，否則會滑鼠指針為禁止樣式

 all ，允許 dropEffect 的屬性值為任意值

 none ，滑鼠指針一直為禁止樣式，不管 dropEffect 的屬性值是什麼

 uninitialized ，沒有限定 dropEffect 屬性的值，效果和 all 一樣。

 注意：

1、僅能在 dragstart 事件中設定該屬性，其他事件中設定均無效