HTML - 拖放 API：初學者指南

你好，未來的網頁開發者們！今天，我們將踏上一段令人興奮的旅程，探索 HTML5 的拖放 API。作為你們親切的鄰居計算機老師，我在這裡指導你們如何使用這個令人著迷的功能，它可以使你的網頁更加互動和用戶友好。所以，拿起你喜歡的飲料，放鬆一下，我們來一起深入探究吧！

拖放 API 是什麼？

在我們像數字巫師一樣開始拖動和放置元素之前，讓我們先了解這個 API 是關於什麼的。拖放（DnD）API 讓我們能夠使 HTML 元素可拖動，這意味著用戶可以點擊一個元素，將它拖到新的位置，然後放在那裡。這就像是給你的網頁元素賦予超能力！

使元素可拖動

讓我們從基礎開始。要使元素可拖動，我們需要使用 draggable 屬性。這就像是在任何你想讓用戶移動的 HTML 元素上添加這個屬性那麼簡單。

<div draggable="true">拖動我！</div>

在這個例子中，我們創建了一個 <div> 元素，並通過設置 draggable="true" 使其可拖動。現在，用戶可以點擊這個 div 並在頁面上拖動它。酷炫吧？

但等等，還有更多！僅僅使元素可拖動是不夠的。我們需要添加一些 JavaScript 來控制當元素被拖動和放置時發生的事情。這就是我們的拖放事件發揮作用的時候。

拖放事件

拖放 API 為我們提供了一系列事件，我們可以聽取和回應這些事件。這些事件讓我們能夠控制整個拖放過程。讓我們看看主要的事件：

事件名稱	描述
dragstart	當用戶開始拖動元素時觸發
drag	當用戶正在拖動元素時持續觸發
dragenter	當拖動的元素進入有效的放置目標時觸發
dragover	當拖動的元素在有效的放置目標上方時持續觸發
dragleave	當拖動的元素離開有效的放置目標時觸發
drop	當用戶放置元素時觸發
dragend	當拖動操作結束時（無論成功與否）觸發

現在，讓我們看看如何在實踐中使用這些事件：

<div id="draggable" draggable="true">拖動我！</div>
<div id="droppable">放在這裡！</div>

<script>
const draggable = document.getElementById('draggable');
const droppable = document.getElementById('droppable');

draggable.addEventListener('dragstart', (e) => {
console.log('拖動開始');
});

droppable.addEventListener('dragover', (e) => {
e.preventDefault(); // 必須阻止默認行為以允許放置
console.log('在放置區域上拖動');
});

droppable.addEventListener('drop', (e) => {
e.preventDefault();
console.log('已放置！');
droppable.appendChild(draggable);
});
</script>

在這個例子中，我們創建了兩個 <div> 元素：一個可拖動，一個可放置。我們為 dragstart、dragover 和 drop 事件添加了事件監聽器。當你拖動元素並將其放置在放置區域時，你會在控制台看到消息，並且拖動的元素會被移動到放置區域。

DataTransfer 對象

現在，讓我們來谈谈我們拖放工具包中的一個強大工具：DataTransfer 對象。這個對象用於在拖放操作過程中保存被拖動的數據。它讓我們能夠設置和獲取有關拖動操作的信息。

這樣使用它：

<div id="draggable" draggable="true">拖動我！</div>
<div id="droppable">放在這裡！</div>

<script>
const draggable = document.getElementById('draggable');
const droppable = document.getElementById('droppable');

draggable.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.id);
});

droppable.addEventListener('dragover', (e) => {
e.preventDefault();
});

droppable.addEventListener('drop', (e) => {
e.preventDefault();
const data = e.dataTransfer.getData('text');
const draggedElement = document.getElementById(data);
e.target.appendChild(draggedElement);
});
</script>

在這個例子中，我們使用 setData() 在拖動開始時保存被拖動元素的 ID。然後，在 drop 事件中，我們使用 getData() 獲取這個數據，並使用它來移動被拖動的元素。

拖放過程

現在我們已經介紹了個別的部分，讓我們一起走過整個拖放過程：

1. 初始化拖動：用戶點擊一個可拖動元素並開始拖動。
2. 拖動：當用戶移動鼠標時，drag 事件持續觸發。
3. 進入放置區域：當拖動的元素進入一個有效的放置區域時，dragenter 事件觸發。
4. 在放置區域上方：當拖動的元素在放置區域上方時，dragover 事件持續觸發。
5. 離開放置區域：如果拖動的元素離開放置區域，dragleave 事件觸發。
6. 放置：當用戶釋放鼠標按鈕以放置元素時，drop 事件觸發。
7. 結束拖動：最後，dragend 事件觸發，標誌著拖動操作的結束。

在這個綜合例子中，我們實現了所有的拖放事件：

<div id="draggable" draggable="true">拖動我！</div>
<div id="droppable">放在這裡！</div>

<script>
const draggable = document.getElementById('draggable');
const droppable = document.getElementById('droppable');

draggable.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.id);
e.target.style.opacity = '0.5';
});

draggable.addEventListener('dragend', (e) => {
e.target.style.opacity = '';
});

droppable.addEventListener('dragenter', (e) => {
e.target.style.background = '淺藍色';
});

droppable.addEventListener('dragleave', (e) => {
e.target.style.background = '';
});

droppable.addEventListener('dragover', (e) => {
e.preventDefault();
});

droppable.addEventListener('drop', (e) => {
e.preventDefault();
const data = e.dataTransfer.getData('text');
const draggedElement = document.getElementById(data);
e.target.appendChild(draggedElement);
e.target.style.background = '';
});
</script>

在這個例子中，我們實現了所有的拖放事件。我們在拖動過程中改變了被拖動元素的透明度，當元素被拖動到放置區域上方時突出顯示放置區域，當元素被放置時將其移動到放置區域。

至此，你們已經學會了 HTML5 拖放 API 的基礎知識。有了這個知識，你可以創建有互動性的網頁元素，用戶可以進行拖放操作。記住，熟能生巧，所以不要害怕嘗試並創建你自己的拖放項目。

當我們結束這個課程時，我會想起偉大的李小龙的一句話："我不懼那個練過一萬次踢腿的人，但我懼那個練過一萬次一次踢腿的人。" 所以，出去練習你的拖放技能吧。在你還不知道之前，你將會創造出讓用戶驚艷的互動網頁體驗！

快樂編程，願你的元素總是能夠精確放置！

Credits: Image by storyset