JavaScript 是其中一種最受歡迎的程式語言，擁有超過 24 個框架和約 84 個函式庫。它是唯一被所有瀏覽器原生支援的程式語言。此外，該語言支援動態型別，非常適合用於渲染和動畫。您可以利用 JavaScript 在前端添加互動行為、控制後端、建立網頁和行動應用程式等。為任何網站添加效果並使其可自訂的選項，使該語言成為全球開發者的最愛。
在本指南中，我們將 引導您完成使用純原生 JavaScript (Vanilla JavaScript) 建立拖放元素的步驟。此外，我們將更進一步，使用 HTML Drag and Drop API 事件處理常式建立一個「晨間排程器」應用程式。
先決條件
若要跟隨本教學，您必須具備：
步驟 1：建立新專案
首先建立一個包含兩個子元素的容器。我們將使用第一個子元素進行拖曳，並使用第二個子元素來儲存拖曳的元素。
|
注意： 在本教學中，我們將把容器視為存放所有拖曳元素的倉庫。簡單來說，從第一個子元素拖曳的所有元素都將放置到第二個子元素中。 |
|
1 |
$ mkdir drag-and-drop-demo |
接下來，使用 cd 指令將目錄切換至 drag-and-drop-demo 資料夾：
|
1 |
$ cd drag-and-drop-demo |
步驟 2：初始設定
在本教學中，我們將建立 HTML、CSS 和 JavaScript 檔案並將它們連結。首先，將檔案分別命名為 index.html, styles.css 和 scripts.js 檔案。
接下來，在 「我的晨間計畫」 檔案中新增標題： index.html 檔案：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>我的晨間計畫</title> </head> <body> </body> </html> |
接下來，連結 CSS，並將 JavaScript 新增至 HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> <title>我的晨間計畫</title> </head> <body> </body> </html> |
接下來，在 <body> 標籤中添加以下幾行程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="styles.css"> <script src="script.js" defer></script> <title>我的晨間計畫表</title> </head> <body> <div class="container"> <h1><center>我的晨間計畫表</center></h1> <h2 class="draggable" draggable="true">去健身房</h2> <h2 class="draggable" draggable="true">閱讀 30 分鐘</h2> <h2 class="draggable" draggable="true">準備燕麥片</h2> </div> <div class="container"> <h2 class="draggable" draggable="true">洗個冷水澡</h2> <h2 class="draggable" draggable="true">開始我的一天</h2> </div> </body> </html> |
儲存並關閉 index.html 檔案。之後，嘗試在瀏覽器中開啟 index.html 檔案，您將會看到一個頁面開啟：
接下來，讓我們使用 CSS 來為我們的 index.html 進行樣式設計，使其看起來美觀。
步驟 3：使用 CSS 進行樣式設計
接下來，為我們在 index.html 檔案中包含的所有元素添加樣式：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
body { margin: 0; } .container { background-color: #DEB887; padding: 1rem; margin-top: 1rem; } .draggable { padding: 1rem; background-color: #FAF0E6; border: 1px solid #708090; cursor: move; } |
嘗試在瀏覽器中開啟 index.html 檔案並查看輸出結果：
雖然我們已經完成了結構建置並添加了樣式，但這些元素仍然是靜態的。這意味著，在我們為其添加動態功能之前，我們無法移動或滾動元素。在下一步中，我們將引入 JavaScript 和動態行為。
步驟 4：引入 JavaScript
在此步驟中，我們將引入 JavaScript 並使所有拖曳元素發揮作用。在 JS 檔案中，設定我們需要的元素。讓我們定義 draggable 以及 containers 來分別進行拖放元素。
在 中加入這兩行程式碼scripts.js 檔案：
|
1 2 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') |
接下來，設定所有的事件監聽器。首先加入 “dragstart” 元素作為第一個事件監聽器，以 add 類別列表。同樣地，加入 “dragend” 元素作為第二個事件監聽器，以 remove 類別列表。
在您的 EventListeners 中附加以下 scripts.js 檔案：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const draggables = document.querySelectorAll('.draggable') const containers = document.querySelectorAll('.container') draggables.forEach(draggable => { draggable.addEventListener('dragstart', () => { draggable.classList.add('dragging') }) draggable.addEventListener('dragend', () => { draggable.classList.remove('dragging') }) }) |
接下來，加入 “dragover” EventListener，用於懸停和移動我們的元素。設定目前的 draggable 元素，使用 querySelector，然後將拖曳元素附加到目前的容器中：
|
1 2 3 4 5 6 |
// … containers.forEach(container => { container.addEventListener('dragover', () => { const draggable = document.querySelector('.dragging') }) }) |
預設情況下，在元素內部進行放置是被停用的。使用 e.preventDefault 來啟用它：
|
1 2 3 4 5 6 7 8 |
// … containers.forEach(container => { container.addEventListener('dragover', e => { e.preventDefault() const draggable = document.querySelector('.dragging') container.appendChild(draggable) }) }) |
接下來，建立一個元素來確定滑鼠位置。首先建立一個 函式getDragAfterElement，它將接受兩個參數。第一個是 container，而第二個參數 y 將處理滑鼠的 Y 軸位置。現在，使用 querySelectorAll 函式來取得我們的拖曳元素。定義一個 draggableElements 指向容器內的所有拖曳元素：
|
1 2 3 4 |
// … function getDragAfterElement(container, y) { const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')] } |
接下來，呼叫一個 reduce 函式，該函式將循環遍歷拖曳元素列表，並指定滑鼠游標後面的單個元素。接下來， return 該 reduce 函式，並將第一個元素加入為 closest，第二個加入為 child。此外，使 相等offset 並加入條件。
請在 scripts.js 檔案中加入以下幾行程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// … return draggableElements.reduce((closest, child) => { const box = child.getBoundingClientRect() const offset = y - box.top - box.height / 2 if (offset < 0 && offset > closest.offset){ return { offset: offset, element: child } } else { return closest } }, { offset: Number.NEGATIVE_INFINITY}).element } |
將此包含在 scripts.js 檔案中：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// … containers.forEach(container => { container.addEventListener('dragover', e =>{ e.preventDefault() const afterElement = getDragAfterElement(container, e.clientY) const draggable = document.querySelector('.dragging') if (afterElement == null) { container.appendChild(draggable) } else { container.insertBefore(draggable, afterElement) } }) }) |
現在我們已經完成了必要的設定。打開您的瀏覽器並執行 index.html。您將在瀏覽器中看到 “My Morning Scheduler” 頁面，其中包含拖放選項。中間的白線起到了橋樑作用，用於區分已完成的任務和待完成的任務：
結論
拖放是現代網站中一個非常棒的選擇。在本指南中，我們使用了少數幾個事件處理常式，以便讓初學者更容易上手。總共有八個事件處理常式，我們鼓勵您在進階學習時使用它們。一旦您熟悉了本教學中使用的函式和程式碼，就可以深入研究 JavaScript 主題，例如 jQuery 並開始探索。您也可以嘗試使用 JavaScript 日期和時間功能，以及利用您剛剛學到的概念建立其他應用程式。
若要進一步學習更多關於 JavaScript 和網頁開發的主題，請參考來自 我們部落格:
- JavaScript 工具：localStorage 和 sessionStorage
- 使用 JavaScript：什麼是物件
- 在 JavaScript 中使用 JSON 的教學
- 使用 JavaScript：類別如何運作
祝您運算愉快！
留言
目前尚無留言。成為第一個留言的人吧。