JavaScript 拖拉時間之drag案例詳解

Posted on 2021-09-15 by WalkonNet

拖拉的對象有好幾種，包括元素節點、圖片、鏈接、選中的文字等等。在網頁中，除瞭元素節點默認不可以拖拉，其他（圖片、鏈接、選中的文字）都是可以直接拖拉的。為瞭讓元素節點可拖拉，可以將該節點的draggable屬性設為true。

<div draggable="true">
  此區域可拖拉
</div>

draggable屬性可用於任何元素節點，但是圖片（<img>）和鏈接（<a>）不加這個屬性，就可以拖拉。對於它們，用到這個屬性的時候，往往是將其設為false，防止拖拉這兩種元素。

註意，一旦某個元素節點的draggable屬性設為true，就無法再用鼠標選中該節點內部的文字或子節點瞭。

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

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

下面的例子展示，如何動態改變被拖動節點的背景色。

div.addEventListener('dragstart', function (e) {
  this.style.backgroundColor = 'red';
}, false);
 
div.addEventListener('dragend', function (e) {
  this.style.backgroundColor = 'green';
}, false);

上面代碼中，div節點被拖動時，背景色會變為紅色，拖動結束，又變回綠色。

下面是一個例子，展示如何實現將一個節點從當前父節點，拖拉到另一個父節點中。

/* HTML 代碼如下
 <div class="dropzone">
   <div id="draggable" draggable="true">
     該節點可拖拉
   </div>
 </div>
 <div class="dropzone"></div>
 <div class="dropzone"></div>
 <div class="dropzone"></div>
*/
 
// 被拖拉節點
var dragged;
 
document.addEventListener('dragstart', function (event) {
  // 保存被拖拉節點
  dragged = event.target;
  // 被拖拉節點的背景色變透明
  event.target.style.opacity = 0.5;
}, false);
 
document.addEventListener('dragend', function (event) {
  // 被拖拉節點的背景色恢復正常
  event.target.style.opacity = '';
}, false);
 
document.addEventListener('dragover', function (event) {
  // 防止拖拉效果被重置，允許被拖拉的節點放入目標節點
  event.preventDefault();
}, false);
 
document.addEventListener('dragenter', function (event) {
  // 目標節點的背景色變紫色
  // 由於該事件會冒泡，所以要過濾節點
  if (event.target.className === 'dropzone') {
    event.target.style.background = 'purple';
  }
}, false);
 
document.addEventListener('dragleave', function( event ) {
  // 目標節點的背景色恢復原樣
  if (event.target.className === 'dropzone') {
    event.target.style.background = '';
  }
}, false);
 
document.addEventListener('drop', function( event ) {
  // 防止事件默認行為（比如某些元素節點上可以打開鏈接），
  event.preventDefault();
  if (event.target.className === 'dropzone') {
    // 恢復目標節點背景色
    event.target.style.background = '';
    // 將被拖拉節點插入目標節點
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild( dragged );
  }
}, false);

關於拖拉事件，有以下幾個註意點。

拖拉過程隻觸發以上這些拖拉事件，盡管鼠標在移動，但是鼠標事件不會觸發。
將文件從操作系統拖拉進瀏覽器，不會觸發dragstart和dragend事件。
dragenter和dragover事件的監聽函數，用來取出拖拉的數據（即允許放下被拖拉的元素）。由於網頁的大部分區域不適合作為放下拖拉元素的目標節點，所以這兩個事件的默認設置為當前節點不允許接受被拖拉的元素。如果想要在目標節點上放下的數據，首先必須阻止這兩個事件的默認行為。

<div ondragover="return false">
<div ondragover="event.preventDefault()">

上面代碼中，如果不取消拖拉事件或者阻止默認行為，就不能在div節點上放下被拖拉的節點。

DragEvent 接口

拖拉事件都繼承瞭DragEvent接口，這個接口又繼承瞭MouseEvent接口和Event接口。

瀏覽器原生提供一個DragEvent()構造函數，用來生成拖拉事件的實例對象。

new DragEvent(type, options)

DragEvent()構造函數接受兩個參數，第一個參數是字符串，表示事件的類型，該參數必須；第二個參數是事件的配置對象，用來設置事件的屬性，該參數可選。配置對象除瞭接受MouseEvent接口和Event接口的配置屬性，還可以設置dataTransfer屬性要麼是null，要麼是一個DataTransfer接口的實例。

DataTransfer的實例對象用來讀寫拖拉事件中傳輸的數據，詳見下文《DataTransfer 接口》的部分。

DataTransfer 接口概述

所有拖拉事件的實例都有一個DragEvent.dataTransfer屬性，用來讀寫需要傳遞的數據。這個屬性的值是一個DataTransfer接口的實例。

瀏覽器原生提供一個DataTransfer()構造函數，用來生成DataTransfer實例對象。

var dataTrans = new DataTransfer();

DataTransfer()構造函數不接受參數。

拖拉的數據分成兩方面：數據的種類（又稱格式）和數據的值。數據的種類是一個 MIME 字符串（比如text/plain、image/jpeg），數據的值是一個字符串。一般來說，如果拖拉一段文本，則數據默認就是那段文本；如果拖拉一個鏈接，則數據默認就是鏈接的 URL。

拖拉事件開始時，開發者可以提供數據類型和數據值。拖拉過程中，開發者通過dragenter和dragover事件的監聽函數，檢查數據類型，以確定是否允許放下（drop）被拖拉的對象。比如，在隻允許放下鏈接的區域，檢查拖拉的數據類型是否為text/uri-list。

發生drop事件時，監聽函數取出拖拉的數據，對其進行處理。

DataTransfer 的實例屬性

DataTransfer.dropEffect

DataTransfer.dropEffect屬性用來設置放下（drop）被拖拉節點時的效果，會影響到拖拉經過相關區域時鼠標的形狀。它可能取下面的值。

copy：復制被拖拉的節點
move：移動被拖拉的節點
link：創建指向被拖拉的節點的鏈接
none：無法放下被拖拉的節點

除瞭上面這些值，設置其他的值都是無效的。

target.addEventListener('dragover', function (e) {
  e.preventDefault();
  e.stopPropagation();
  e.dataTransfer.dropEffect = 'copy';
});

上面代碼中，被拖拉元素一旦drop，接受的區域會復制該節點。

dropEffect屬性一般在dragenter和dragover事件的監聽函數中設置，對於dragstart、drag、dragleave這三個事件，該屬性不起作用。因為該屬性隻對接受被拖拉的節點的區域有效，對被拖拉的節點本身是無效的。進入目標區域後，拖拉行為會初始化成設定的效果。

DataTransfer.effectAllowed

DataTransfer.effectAllowed屬性設置本次拖拉中允許的效果。它可能取下面的值。

copy：復制被拖拉的節點
move：移動被拖拉的節點link：創建指向被拖拉節點的鏈接
copyLink：允許copy或link
copyMove：允許copy或move
linkMove：允許link或move
all：允許所有效果
none：無法放下被拖拉的節點
uninitialized：默認值，等同於all

如果某種效果是不允許的，用戶就無法在目標節點中達成這種效果。

這個屬性與dropEffect屬性是同一件事的兩個方面。前者設置被拖拉的節點允許的效果，後者設置接受拖拉的區域的效果，它們往往配合使用。

dragstart事件的監聽函數，可以用來設置這個屬性。其他事件的監聽函數裡面設置這個屬性是無效的。

source.addEventListener('dragstart', function (e) {
  e.dataTransfer.effectAllowed = 'move';
});
 
target.addEventListener('dragover', function (e) {
  ev.dataTransfer.dropEffect = 'move';
});

隻要dropEffect屬性和effectAllowed屬性之中，有一個為none，就無法在目標節點上完成drop操作。

DataTransfer.files

DataTransfer.files屬性是一個 FileList 對象，包含一組本地文件，可以用來在拖拉操作中傳送。如果本次拖拉不涉及文件，則該屬性為空的 FileList 對象。

下面就是一個接收拖拉文件的例子。

// HTML 代碼如下
// <div id="output" style="min-height: 200px;border: 1px solid black;">
//   文件拖拉到這裡
// </div>
 
var div = document.getElementById('output');
 
div.addEventListener("dragenter", function( event ) {
  div.textContent = '';
  event.stopPropagation();
  event.preventDefault();
}, false);
 
div.addEventListener("dragover", function( event ) {
  event.stopPropagation();
  event.preventDefault();
}, false);
 
div.addEventListener("drop", function( event ) {
  event.stopPropagation();
  event.preventDefault();
  var files = event.dataTransfer.files;
  for (var i = 0; i < files.length; i++) {
    div.textContent += files[i].name + ' ' + files[i].size + '字節\n';
  }
}, false);

上面代碼中，通過dataTransfer.files屬性讀取被拖拉的文件的信息。如果想要讀取文件內容，就要使用FileReader對象。

div.addEventListener('drop', function(e) {
  e.preventDefault();
  e.stopPropagation();
 
  var fileList = e.dataTransfer.files;
  if (fileList.length > 0) {
    var file = fileList[0];
    var reader = new FileReader();
    reader.onloadend = function(e) {
      if (e.target.readyState === FileReader.DONE) {
        var content = reader.result;
        div.innerHTML = 'File: ' + file.name + '\n\n' + content;
      }
    }
    reader.readAsBinaryString(file);
  }
});

DataTransfer.types

DataTransfer.types屬性是一個隻讀的數組，每個成員是一個字符串，裡面是拖拉的數據格式（通常是 MIME 值）。比如，如果拖拉的是文字，對應的成員就是text/plain。

下面是一個例子，通過檢查dataTransfer屬性的類型，決定是否允許在當前節點執行drop操作。

function contains(list, value){
  for (var i = 0; i < list.length; ++i) {
    if(list[i] === value) return true;
  }
  return false;
}
 
function doDragOver(event) {
  var isLink = contains(event.dataTransfer.types, 'text/uri-list');
  if (isLink) event.preventDefault();
}

上面代碼中，隻有當被拖拉的節點是一個鏈接時，才允許在當前節點放下。

DataTransfer.items

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)：如果被拖拉的是字符串，將該字符傳入指定的回調函數處理。該方法是異步的，所以需要傳入回調函數。

下面是一個例子。

div.addEventListener('drop', function (e) {
  e.preventDefault();
  if (e.dataTransfer.items != null) {
    for (var i = 0; i < e.dataTransfer.items.length; i++) {
      console.log(e.dataTransfer.items[i].kind + ': ' + e.dataTransfer.items[i].type);
    }
  }
});

DataTransfer 的實例方法

DataTransfer.setData()

DataTransfer.setData()方法用來設置拖拉事件所帶有的數據。該方法沒有返回值。

event.dataTransfer.setData('text/plain', 'Text to drag');

上面代碼為當前的拖拉事件加入純文本數據。

該方法接受兩個參數，都是字符串。第一個參數表示數據類型（比如text/plain），第二個參數是具體數據。如果指定類型的數據在dataTransfer屬性不存在，那麼這些數據將被加入，否則原有的數據將被新數據替換。

如果是拖拉文本框或者拖拉選中的文本，會默認將對應的文本數據，添加到dataTransfer屬性，不用手動指定。

<div draggable="true">
  aaa
</div>

上面代碼中，拖拉這個<div>元素會自動帶上文本數據aaa。

使用setData方法，可以替換到原有數據。

<div
  draggable="true"
  ondragstart="event.dataTransfer.setData('text/plain', 'bbb')"
>
  aaa
</div>

上面代碼中，拖拉數據實際上是bbb，而不是aaa。

下面是添加其他類型的數據。由於text/plain是最普遍支持的格式，為瞭保證兼容性，建議最後總是保存一份純文本格式的數據。

var dt = event.dataTransfer;
 
// 添加鏈接
dt.setData('text/uri-list', 'http://www.example.com');
dt.setData('text/plain', 'http://www.example.com');
 
// 添加 HTML 代碼
dt.setData('text/html', 'Hello there, <strong>stranger</strong>');
dt.setData('text/plain', 'Hello there, <strong>stranger</strong>');
 
// 添加圖像的 URL
dt.setData('text/uri-list', imageurl);
dt.setData('text/plain', imageurl);

可以一次提供多種格式的數據。

var dt = event.dataTransfer;
dt.setData('application/x-bookmark', bookmarkString);
dt.setData('text/uri-list', 'http://www.example.com');
dt.setData('text/plain', 'http://www.example.com');

上面代碼中，通過在同一個事件上面，存放三種類型的數據，使得拖拉事件可以在不同的對象上面，drop不同的值。註意，第一種格式是一個自定義格式，瀏覽器默認無法讀取，這意味著，隻有某個部署瞭特定代碼的節點，才可能drop（讀取到）這個數據。

DataTransfer.getData()

DataTransfer.getData()方法接受一個字符串（表示數據類型）作為參數，返回事件所帶的指定類型的數據（通常是用setData方法添加的數據）。如果指定類型的數據不存在，則返回空字符串。通常隻有drop事件觸發後，才能取出數據。

下面是一個drop事件的監聽函數，用來取出指定類型的數據。

function onDrop(event) {
  var data = event.dataTransfer.getData('text/plain');
  event.target.textContent = data;
  event.preventDefault();
}

上面代碼取出拖拉事件的文本數據，將其替換成當前節點的文本內容。註意，這時還必須取消瀏覽器的默認行為，因為假如用戶拖拉的是一個鏈接，瀏覽器默認會在當前窗口打開這個鏈接。

getData方法返回的是一個字符串，如果其中包含多項數據，就必須手動解析。

function doDrop(event) {
  var lines = event.dataTransfer.getData('text/uri-list').split('\n');
  for (let line of lines) {
    let link = document.createElement('a');
    link.href = line;
    link.textContent = line;
    event.target.appendChild(link);
  }
  event.preventDefault();
}

上面代碼中，getData方法返回的是一組鏈接，就必須自行解析。

類型值指定為URL，可以取出第一個有效鏈接。

var link = event.dataTransfer.getData('URL');

下面的例子是從多種類型的數據裡面取出數據。

function doDrop(event) {
  var types = event.dataTransfer.types;
  var supportedTypes = ['text/uri-list', 'text/plain'];
  types = supportedTypes.filter(function (value) { types.includes(value) });
  if (types.length) {
    var data = event.dataTransfer.getData(types[0]);
  }
  event.preventDefault();
}

DataTransfer.clearData()

DataTransfer.clearData()方法接受一個字符串（表示數據類型）作為參數，刪除事件所帶的指定類型的數據。如果沒有指定類型，則刪除所有數據。如果指定類型不存在，則調用該方法不會產生任何效果。

event.dataTransfer.clearData('text/uri-list');

上面代碼清除事件所帶的text/uri-list類型的數據。

該方法不會移除拖拉的文件，因此調用該方法後，DataTransfer.types屬性可能依然會返回Files類型（前提是存在文件拖拉）。

註意，該方法隻能在dragstart事件的監聽函數之中使用，因為這是拖拉操作的數據唯一可寫的時機。

DataTransfer.setDragImage()

拖動過程中（dragstart事件觸發後），瀏覽器會顯示一張圖片跟隨鼠標一起移動，表示被拖動的節點。這張圖片是自動創造的，通常顯示為被拖動節點的外觀，不需要自己動手設置。

DataTransfer.setDragImage()方法可以自定義這張圖片。它接受三個參數。第一個是<img>節點或者<canvas>節點，如果省略或為null，則使用被拖動的節點的外觀；第二個和第三個參數為鼠標相對於該圖片左上角的橫坐標和右坐標。

下面是一個例子。

/* HTML 代碼如下
 <div id="drag-with-image" class="dragdemo" draggable="true">
   drag me
 </div>
*/
 
var div = document.getElementById('drag-with-image');
div.addEventListener('dragstart', function (e) {
  var img = document.createElement('img');
  img.src = 'http://path/to/img';
  e.dataTransfer.setDragImage(img, 0, 0);
}, false);

到此這篇關於JavaScript 拖拉時間之drag案例詳解的文章就介紹到這瞭,更多相關js 拖拉時間之drag內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

JavaScript 拖拉時間之drag案例詳解

目錄

DragEvent 接口

DataTransfer 接口概述

DataTransfer 的實例屬性

DataTransfer.dropEffect

DataTransfer.effectAllowed

DataTransfer.files

DataTransfer.types

DataTransfer.items

DataTransfer 的實例方法

DataTransfer.setData()

DataTransfer.getData()

DataTransfer.clearData()

DataTransfer.setDragImage()

推薦閱讀：

發佈留言取消回覆

近期文章

目錄

DragEvent 接口

DataTransfer 接口概述

DataTransfer 的實例屬性

DataTransfer.dropEffect

DataTransfer.effectAllowed

DataTransfer.files

DataTransfer.types

DataTransfer.items

DataTransfer 的實例方法

DataTransfer.setData()

DataTransfer.getData()

DataTransfer.clearData()

DataTransfer.setDragImage()

推薦閱讀：

發佈留言 取消回覆

近期文章

標籤

發佈留言取消回覆