快捷導(dǎo)航

JavaScript原生拖放詳解

更新時(shí)間：2024年11月25日 14:41:07 作者：橘貓吃不胖～

本文介紹了HTML5拖放事件的處理方法,包括拖放事件的觸發(fā)順序、dataTransfer對(duì)象的使用以及可拖動(dòng)能力的設(shè)置,通過(guò)這些方法,可以實(shí)現(xiàn)更豐富的用戶交互效果

拖放事件

拖放事件可以讓開發(fā)者控制拖放操作的方方面面，關(guān)鍵的部分是確定每個(gè)事件是在哪里觸發(fā)的，有的事件在被拖放元素上觸發(fā)，有的事件則在放置目標(biāo)上觸發(fā)。

當(dāng)某個(gè)元素被拖動(dòng)時(shí)，會(huì)按順序觸發(fā)以下事件：

事件	說(shuō)明
dragstart	按住鼠標(biāo)不放開始移動(dòng)鼠標(biāo)時(shí)觸發(fā)
drag	元素正在被拖動(dòng)時(shí)觸發(fā)
dragend	停止拖動(dòng)時(shí)觸發(fā)

在把元素拖動(dòng)到一個(gè)有效的放置目標(biāo)上時(shí)，會(huì)依次觸發(fā)以下事件：

事件	說(shuō)明
dragenter	被拖動(dòng)的元素進(jìn)入目標(biāo)容器時(shí)觸發(fā)
dragover	被拖拽元素在目標(biāo)容器內(nèi)拖動(dòng)時(shí)觸發(fā)
dragleave	被拖動(dòng)元素離開目標(biāo)容器時(shí)觸發(fā)
drop	被拖動(dòng)元素放到了目標(biāo)容器上觸發(fā)

如果我們想讓一個(gè)元素可以被拖放，還要為該元素添加dragabble屬性

dataTransfer對(duì)象

dataTransfer對(duì)象實(shí)現(xiàn)了拖動(dòng)操作中的數(shù)據(jù)傳輸，用于從被拖動(dòng)元素向放置目標(biāo)傳遞字符串?dāng)?shù)據(jù)。

因?yàn)檫@個(gè)對(duì)象是event的屬性，所以在拖放事件的事件處理程序外部無(wú)法訪問(wèn)dataTransfer。

該對(duì)象內(nèi)部有以下屬性和方法：

事件	說(shuō)明
dropEffect	可以告訴瀏覽器允許哪種放置行為，獲取當(dāng)前選定的拖放操作類型或者設(shè)置的為一個(gè)新的類型。值必須為none, copy, link、move。
effectAllowed	表示對(duì)被拖動(dòng)元素是否允許dropEffect，提供所有可用的操作類型。必須是none, copy, copyLink, copyMove, link, linkMove, move, all、uninitialized之一。
files	包含數(shù)據(jù)傳輸中可用的所有本地文件的列表。如果拖動(dòng)操作不涉及拖動(dòng)文件，則此屬性為空列表。
items	提供一個(gè)包含所有拖動(dòng)數(shù)據(jù)列表的DataTransferItemList對(duì)象。
types	一個(gè)提供dragstart事件中設(shè)置的格式的strings數(shù)組。
clearData()	刪除與給定類型關(guān)聯(lián)的數(shù)據(jù)。類型參數(shù)是可選的。如果類型為空或未指定，則刪除與所有類型關(guān)聯(lián)的數(shù)據(jù)。如果指定類型的數(shù)據(jù)不存在，或者data transfer中不包含任何數(shù)據(jù)，則該方法不會(huì)產(chǎn)生任何效果。
getData()	檢索給定類型的數(shù)據(jù)，如果該類型的數(shù)據(jù)不存在或data transfer不包含數(shù)據(jù)，則返回空字符串。
setData()	設(shè)置給定類型的數(shù)據(jù)。如果該類型的數(shù)據(jù)不存在，則將其添加到末尾，以便類型列表中的最后一項(xiàng)將是新的格式。如果該類型的數(shù)據(jù)已經(jīng)存在，則在相同位置替換現(xiàn)有數(shù)據(jù)。
setDragImage()	用于設(shè)置自定義的拖動(dòng)圖像。

可拖動(dòng)能力

HTML5在所有HTML元素上規(guī)定了一個(gè)draggable屬性，表示元素是否可以拖動(dòng)。

圖片和鏈接的draggable屬性自動(dòng)被設(shè)置為true，而其他所有元素此屬性的默認(rèn)值為false。

如果想讓其他元素可拖動(dòng)，或者不允許圖片和鏈接被拖動(dòng)，都可以設(shè)置這個(gè)屬性。

示例代碼：

<!-- 禁止拖動(dòng)圖片 -->
<img src="smile.gif" draggable="false" alt="Smiley face">
<!-- 讓元素可以拖動(dòng) -->
<div draggable="true">...</div>

一個(gè)拖動(dòng)demo

設(shè)置一個(gè)可以拖拽的元素：

<div id="draggable" draggable="true">Drag me!</div>

#draggable {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: #fff;
  text-align: center;
  line-height: 100px;
  cursor: move;
  position: absolute;
}

const draggableElement = document.getElementById('draggable');
let offsetX, offsetY;
draggableElement.addEventListener('dragstart', function (event) {
  // 拖動(dòng)開始時(shí)計(jì)算鼠標(biāo)位置與元素左上角的偏移，并記錄
  offsetX = event.clientX - draggableElement.getBoundingClientRect().left;
  offsetY = event.clientY - draggableElement.getBoundingClientRect().top;
});

draggableElement.addEventListener('drag', function (event) {
  // 計(jì)算元素應(yīng)該移動(dòng)到的位置
  const x = event.clientX - offsetX;
  const y = event.clientY - offsetY;
  // 更新元素位置
  draggableElement.style.left = x + 'px';
  draggableElement.style.top = y + 'px';
});

draggableElement.addEventListener('dragend', function (event) {
  const x = event.clientX - offsetX;
  const y = event.clientY - offsetY;
  // 拖動(dòng)結(jié)束之后更新元素的位置
  draggableElement.style.left = x + 'px';
  draggableElement.style.top = y + 'px';
});