使用 HTML、CSS 和 JavaScript 建立可拖曳元素-css教學-PHP中文網

首頁

web前端

css教學

使用 HTML、CSS 和 JavaScript 建立可拖曳元素

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 06, 2024 pm 03:14 PM

在現代 Web 開發中，互動性是吸引使用者和創建動態使用者體驗的關鍵。添加交互性的一種方法是使元素可拖曳。在這篇文章中，我們將探索如何使用 HTML、CSS 和 JavaScript 建立可拖曳元素。

輸出：

Creating a Draggable Element Using HTML, CSS, and 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 函數。此功能：