在現代 Web 開發中，互動性是吸引使用者和創建動態使用者體驗的關鍵。添加交互性的一種方法是使元素可拖曳。在這篇文章中，我們將探索如何使用 HTML、CSS 和 JavaScript 建立可拖曳元素。
輸出：
HTML 結構
讓我們從基本的 HTML 結構開始。我們將建立一個簡單的 div 元素，並使其可拖曳。程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Draggable Element</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="draggable" id="draggableElement">Drag me!</div> <script src="script.js"></script> </body> </html>
在此程式碼中，我們有一個 div，其類別為draggable，ID 為draggableElement。這將是我們可拖曳的元素。
使用 CSS 設定可拖曳元素的樣式
.draggable {
position: absolute;
cursor: grab;
width: 100px;
height: 100px;
background-color: #007bff;
color: #fff;
text-align: center;
line-height: 100px;
border-radius: 8px;
user-select: none;
}
.draggable.dragging {
cursor: grabbing;
}
在此 CSS 中，我們定義 .draggable 類別來設定元素的樣式。我們將其位置設置為絕對位置，以便我們可以在頁面上自由移動它。遊標屬性設定為grab以指示該元素是可拖曳的。我們也定義寬度、高度、背景顏色、文字顏色、文字對齊方式和行高，以使文字垂直和水平居中。為圓角添加了 border-radius，並使用 user-select: none 來防止拖曳時選擇文字。閱讀更多
使用 JavaScript 加入互動性
let draggableElement = document.getElementById('draggableElement');
let offsetX, offsetY;
draggableElement.addEventListener('mousedown', startDragging);
draggableElement.addEventListener('mouseup', stopDragging);
function startDragging(e) {
e.preventDefault();
offsetX = e.clientX - draggableElement.getBoundingClientRect().left;
offsetY = e.clientY - draggableElement.getBoundingClientRect().top;
draggableElement.classList.add('dragging');
document.addEventListener('mousemove', dragElement);
}
function dragElement(e) {
e.preventDefault();
let x = e.clientX - offsetX;
let y = e.clientY - offsetY;
draggableElement.style.left = x + 'px';
draggableElement.style.top = y + 'px';
}
function stopDragging() {
draggableElement.classList.remove('dragging');
document.removeEventListener('mousemove', dragElement);
}
開始拖曳：當使用者在元素上按下滑鼠按鈕時會觸發 startDragging 函數。此功能：
拖曳元素：當滑鼠移動時會觸發dragElement函數。此功能：
停止拖曳：當使用者釋放滑鼠按鈕時會觸發 stopDragging 函數。此功能：
結論：
透過了解事件偵聽器和 DOM 操作的基礎知識，我們可以為 Web 專案添加互動性，從而增強使用者體驗。
閱讀全文 - 點此
以上是使用 HTML、CSS 和 JavaScript 建立可拖曳元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！
