HTML5新增的拖放API

TML拖放接口為DragEvent, DataTransfer, DataTransferItem和DataTransferItemList（后兩者瀏覽器支持很差）.說簡單點就是關于拖拽的系列事件。其實除非是要用DataTransfer,更建議使用瀏覽器支持性更好的鼠標點擊移動松開相關事件。

拖拽相關的系列事件

當元素節點或選中的文本被拖拉時，就會持續觸發拖拉事件，包括以下一些事件。

drag：拖拉過程中，在被拖拉的節點上持續觸發（相隔幾百毫秒）。這類連續觸發的事件都涉及一個問題叫做防抖節流（敬請期待）。
dragstart：用戶開始拖拉時，在被拖拉的節點上觸發，該事件的target屬性是被拖拉的節點。通常應該在這個事件的監聽函數中，指定拖拉的數據。
dragend：拖拉結束時（釋放鼠標鍵或按下 ESC 鍵）在被拖拉的節點上觸發，該事件的target屬性是被拖拉的節點。它與dragstart事件，在同一個節點上觸發。不管拖拉是否跨窗口，或者中途被取消，dragend事件總是會觸發的。
dragenter：拖拉進入當前節點時，在當前節點上觸發一次，該事件的target屬性是當前節點。通常應該在這個事件的監聽函數中，指定是否允許在當前節點放下（drop）拖拉的數據。如果當前節點沒有該事件的監聽函數，或者監聽函數不執行任何操作，就意味著不允許在當前節點放下數據。在視覺上顯示拖拉進入當前節點，也是在這個事件的監聽函數中設置。
dragover：拖拉到當前節點上方時，在當前節點上持續觸發（相隔幾百毫秒），該事件的target屬性是當前節點。該事件與dragenter事件的區別是，dragenter事件在進入該節點時觸發，然后只要沒有離開這個節點，dragover事件會持續觸發。
dragleave：拖拉操作離開當前節點范圍時，在當前節點上觸發，該事件的target屬性是當前節點。如果要在視覺上顯示拖拉離開操作當前節點，就在這個事件的監聽函數中設置。
drop：被拖拉的節點或選中的文本，釋放到目標節點時，在目標節點上觸發。注意，如果當前節點不允許drop，即使在該節點上方松開鼠標鍵，也不會觸發該事件。如果用戶按下 ESC 鍵，取消這個操作，也不會觸發該事件。該事件的監聽函數負責取出拖拉數據，并進行相關處理。

關于上述事件的注意點

一旦某個元素節點的draggable屬性設為true，就無法再用鼠標選中該節點內部的文字或子節點了。
拖拉過程只觸發以上這些拖拉事件，盡管鼠標在移動，但是鼠標事件不會觸發。
將文件從操作系統拖拉進瀏覽器，不會觸發dragstart和dragend事件。
dragenter和dragover事件的監聽函數，用來取出拖拉的數據（即允許放下被拖拉的元素）。由于網頁的大部分區域不適合作為放下拖拉元素的目標節點，所以這兩個事件的默認設置為當前節點不允許接受被拖拉的元素。如果想要在目標節點上放下的數據，首先必須阻止這兩個事件的默認行為。
上述一系列事件只需記住觸發對象：被拖拽對象、當前對象（拖拽過程中經過的）、目標對象（最終釋放區域）；時間（開始拖拽，結束。釋放，進入，在上面，離開）。

dataTransfer

關于事件event參數很重要。區別于其他事件，拖拽系列事件有一點特殊就是dataTransfer。他用來讀寫拖拽需要攜帶的數據。往往是開始拖拽設置數據，結束時候讀取數據。

dataTransfer的屬性

DataTransfer.dropEffect屬性用來設置放下（drop）被拖拉節點時的效果，會影響到拖拉經過相關區域時鼠標的形狀。它可能取下面的值。
copy：復制被拖拉的節點
move：移動被拖拉的節點
link：創建指向被拖拉的節點的鏈接
none：無法放下被拖拉的節點
DataTransfer.effectAllowed屬性設置本次拖拉中允許的效果。它可能取下面的值。
copy：復制被拖拉的節點
move：移動被拖拉的節點
link：創建指向被拖拉節點的鏈接
copyLink：允許copy或link
copyMove：允許copy或move
linkMove：允許link或move
all：允許所有效果
none：無法放下被拖拉的節點
uninitialized：默認值，等同于all
DataTransfer.files屬性是一個 FileList 對象，包含一組本地文件，可以用來在拖拉操作中傳送。如果本次拖拉不涉及文件，則該屬性為空的 FileList 對象。
DataTransfer.types屬性是一個只讀的數組，每個成員是一個字符串，里面是拖拉的數據格式（通常是 MIME 值）。比如，如果拖拉的是文字，對應的成員就是text/plain。
DataTransfer.items（支持性不好）屬性返回一個類似數組的只讀對象（DataTransferItemList 實例），每個成員就是本次拖拉的一個對象（DataTransferItem 實例）。如果本次拖拉不包含對象，則返回一個空對象。
DataTransferItemList 實例具有以下的屬性和方法。
length：返回成員的數量
add(data, type)：增加一個指定內容和類型（比如text/html和text/plain）的字符串作為成員
add(file)：add方法的另一種用法，增加一個文件作為成員
remove(index)：移除指定位置的成員
clear()：移除所有的成員
DataTransferItem 實例具有以下的屬性和方法。
kind：返回成員的種類（string還是file）。
type：返回成員的類型（通常是 MIME 值）。
getAsFile()：如果被拖拉是文件，返回該文件，否則返回null。
getAsString(callback)：如果被拖拉的是字符串，將該字符傳入指定的回調函數處理。該方法是異步的，所以需要傳入回調函數。

dataTransfer的方法

DataTransfer.setData(format,data)方法用來設置拖拉事件所帶有的數據。
DataTransfer.getData(format)方法接受一個字符串（表示數據類型）作為參數，返回事件所帶的指定類型的數據
DataTransfer.clearData()方法接受一個字符串（表示數據類型）作為參數，刪除事件所帶的指定類型的數據。
DataTransfer.setDragImage()：拖動過程中（dragstart事件觸發后），瀏覽器會顯示一張圖片跟隨鼠標一起移動，表示被拖動的節點。這張圖片是自動創造的，通常顯示為被拖動節點的外觀，不需要自己動手設置。DataTransfer.setDragImage()方法可以自定義這張圖片。

何使用HTML5實現拖放單個元素？本篇文章將給大家介紹關于實現拖放HTML元素的JavaScript代碼，下面一起來看具體的實現內容。

通過使用HTML5的拖放功能，您可以拖放HTML頁面元素

我們來看具體的示例

代碼如下

SimpleDragDrop.html

<!DOCTYPE html>

<html>

<head>

function load() {

var box=document.querySelector('.box');

box.addEventListener('dragstart', onDragStart, false);

var zone=document.querySelector('.dropzone');

zone.addEventListener('dragover', onDragOver, false);

zone.addEventListener('drop', onDrop, false);

}

function onDragStart(e) {

e.dataTransfer.setData('text', this.id);

}

function onDragOver(e) {

e.preventDefault();

this.textContent='onDragOver';

}

function onDrop(e) {

e.preventDefault();

this.textContent='onDrop';

}

</script>

</head>

</div>

</body>

</html>

SimpleDragDrop.css

.box {

width:32px;

height:32px;

border:solid 1px #002f9f;

}

.dropzone {

margin-top:16px;

margin-bottom:16px;

width: 280px;

height: 64px;

border: solid 1px #808080;

}

說明：

頁面上顯示兩個上述的div，可以使用class=“box”，id=“dropzone”拖動的對象是放置接受區域的div。對于可拖動對象，可以將draggable=“true”設置為可拖動對象。

function load() {

var box=document.querySelector('.box');

box.addEventListener('dragstart', onDragStart, false);

var zone=document.querySelector('.dropzone');

zone.addEventListener('dragover', onDragOver, false);

zone.addEventListener('drop', onDrop, false);

}

function onDragStart(e) {

e.dataTransfer.setData('text', this.id);

}

function onDragOver(e) {

e.preventDefault();

this.textContent='onDragOver';

}

function onDrop(e) {

e.preventDefault();

this.textContent='onDrop';

}

上面的代碼為每個元素分配拖放事件。

對于要拖動的元素，我們設置“dragstart”事件。啟動拖動時，將執行onDragStart函數。

對于要刪除的元素，設置“dragover”“drop”事件。當拖動的元素進入拖放區域，onDragOver功能被執行，當元件被丟棄onDrop功能將被執行。

在dragstart的情況下，你必須編寫代碼來設置dataTransfer對象的值。它不使用插入dataTransfer中的值，但是如果沒有這個代碼的話，在沒有數據的情況下也會實現。

運行結果

使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。

拖動頂部的方框。如果將其拖動到底部框架，框架中將顯示“onDragOver”。

將其放在框架中時，框架中會顯示“onDrop”字符。

示例2：添加了事件的拖放元素的方法

代碼如下

SimpleDragDrop2.html

<!DOCTYPE html>

<html>

<head>

function load() {

var box=document.querySelector('.box');

box.addEventListener('dragstart', onDragStart, false);

box.addEventListener('dragend', onDragEnd, false);

var box=document.querySelector('.dropzone');

box.addEventListener('dragenter', onDragEnter, false);

box.addEventListener('dragover', onDragOver, false);

box.addEventListener('dragleave', onDragLeave, false);

box.addEventListener('drop', onDrop, false);

}

function onDragStart(e) {

e.dataTransfer.setData('Text', this.id);

this.textContent='onDragStart';

}

function onDragEnd(e) {

this.textContent='onDragEnd';

}

function onDragEnter(e) {

this.textContent='onDragEnter';

}

function onDragOver(e) {

e.preventDefault();

this.textContent='onDragOver';

}

function onDragLeave(e) {

this.textContent='onDragLeave';

}

function onDrop(e) {

e.preventDefault();

this.textContent='onDrop';

}

</script>

</head>

</body>

</html>

SimpleDragDrop.css

.box {

width:32px;

height:32px;

border:solid 1px #d01313;

}

.dropzone {

margin-top:16px;

margin-bottom:16px;

width: 280px;

height: 64px;

border: solid 1px #808080;

}

說明：

如上例所示，頁面上顯示兩頁DIV。對于可拖動對象，請將draggable=“true”設置為可拖動對象。

function load() {

var box=document.querySelector('.box');

box.addEventListener('dragstart', onDragStart, false);

box.addEventListener('dragend', onDragEnd, false);

var box=document.querySelector('.dropzone');

box.addEventListener('dragenter', onDragEnter, false);

box.addEventListener('dragover', onDragOver, false);

box.addEventListener('dragleave', onDragLeave, false);

box.addEventListener('drop', onDrop, false);

}

function onDragStart(e) {

e.dataTransfer.setData('Text', this.id);

this.textContent='onDragStart';

}

function onDragEnd(e) {

this.textContent='onDragEnd';

}

function onDragEnter(e) {

this.textContent='onDragEnter';

}

function onDragOver(e) {

e.preventDefault();

this.textContent='onDragOver';

}

function onDragLeave(e) {

this.textContent='onDragLeave';

}

function onDrop(e) {

e.preventDefault();

this.textContent='onDrop';

}

上面的代碼為每個元素分配拖放事件。

“dragstart”和“dragend”事件被分配給拖動側的元素。一旦開始拖動，調用ondstart函數，拖動結束后，將被調用ondos agEs函數。

“dragenter”，“dragover”，“dragleave”和“drop”事件被分配給要拖動的元素。當拖動的元素進入拖放區域，執行onDragEnter函數的功能，在拖拽區域內拖動的狀態下執行onDragOver函數，從拖拽的區域出來的話，將執行OnDragLeave函數。下拉拖動的元素時，將執行onDrop函數。

運行結果

使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。

拖動紅色區域的方形區域。字符“onDragStart”顯示在該區域中。

當你松開拖動時，你會看到“onDragEnd”的角色紅框中的區域。

再次拖動紅框區域。當拖放到底部區域時，在放置區域中顯示字符“onDragOver”。

當你放開拖到拖放區域紅框的區域，你會看到“onDrop”的字符在底部區域中。

再次拖動紅框以與放置區域重疊。將顯示“onDragOver”字符。

拖動紅框并將其拖動到拖放區域之外。放置區域中的字符顯示變為“onDragLeave”。

以上就是如何使用HTML5實現拖放單個元素的詳細內容，更多請關注其它相關文章！

更多技巧請《轉發 + 關注》哦！

文簡介

點贊 + 關注 + 收藏=學會了

在線咨詢

上一篇：關于京喜+直播入駐、1分鐘教會你掌握全局
下一篇：音樂夢想家簡譜、五線譜、吉他、四線譜鍵盤高速輸入技巧

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5新增的拖放API

文簡介

您的項目需求