快捷導(dǎo)航

JavaScript原生拖放詳解

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

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

拖放事件

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

當(dāng)某個元素被拖動時，會按順序觸發(fā)以下事件：

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

在把元素拖動到一個有效的放置目標(biāo)上時，會依次觸發(fā)以下事件：

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

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

dataTransfer對象

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

因為這個對象是event的屬性，所以在拖放事件的事件處理程序外部無法訪問dataTransfer。

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

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

可拖動能力

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

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

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

示例代碼：

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

一個拖動demo

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

<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) {
  // 拖動開始時計算鼠標(biāo)位置與元素左上角的偏移，并記錄
  offsetX = event.clientX - draggableElement.getBoundingClientRect().left;
  offsetY = event.clientY - draggableElement.getBoundingClientRect().top;
});

draggableElement.addEventListener('drag', function (event) {
  // 計算元素應(yī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;
  // 拖動結(jié)束之后更新元素的位置
  draggableElement.style.left = x + 'px';
  draggableElement.style.top = y + 'px';
});