Mencipta Elemen Boleh Seret Menggunakan HTML, CSS dan JavaScript-tutorial css-php.cn

Mencipta Elemen Boleh Seret Menggunakan HTML, CSS dan JavaScript

WBOY

Lepaskan： 2024-08-06 15:14:50

asal

1258 orang telah melayarinya

Dalam pembangunan web moden, interaktiviti adalah kunci untuk menarik pengguna dan mencipta pengalaman pengguna yang dinamik. Satu cara untuk menambah interaktiviti adalah dengan menjadikan elemen boleh diseret. Dalam siaran ini, kami akan meneroka cara membuat elemen boleh seret menggunakan HTML, CSS dan JavaScript.

output:

Creating a Draggable Element Using HTML, CSS, and JavaScript

Struktur HTML
Mari kita mulakan dengan struktur HTML asas. Kami akan mencipta elemen div mudah yang kami mahu jadikan boleh diseret. Ini kodnya:

<!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>

Salin selepas log masuk

Dalam kod ini, kami mempunyai div dengan kelas yang boleh diseret dan ID bagi draggableElement. Ini akan menjadi elemen yang kami jadikan boleh seret.

Menggayakan Elemen Boleh Seret dengan 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;
}

Salin selepas log masuk

Dalam CSS ini, kami mentakrifkan kelas .draggable untuk menggayakan elemen kami. Kami menetapkan kedudukannya kepada mutlak supaya kami boleh mengalihkannya dengan bebas di sekeliling halaman. Sifat kursor ditetapkan untuk direbut untuk menunjukkan bahawa elemen itu boleh diseret. Kami juga mentakrifkan lebar, ketinggian, warna latar belakang, warna teks, penjajaran teks dan ketinggian baris untuk memusatkan teks secara menegak dan mendatar. Jejari sempadan ditambah untuk sudut bulat, dan pilih pengguna: tiada satu pun digunakan untuk menghalang pemilihan teks semasa menyeret. Baca Lagi

Menambah Interaktiviti dengan 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);
}

Salin selepas log masuk

Mula Menyeret: Fungsi startDragging dicetuskan apabila pengguna menekan butang tetikus ke bawah pada elemen. Fungsi ini:

Menghalang kelakuan lalai acara menggunakan e.preventDefault().
Mengira offset dengan menolak kedudukan sudut kiri atas elemen daripada kedudukan tetikus.
Menambahkan kelas seret untuk menukar kursor.
Menambahkan pendengar acara untuk acara mousemove pada dokumen, yang akan mencetuskan fungsi dragElement.

Elemen Seret: Fungsi Elemen seret dicetuskan apabila tetikus bergerak. Fungsi ini:

Menghalang kelakuan lalai acara.
Mengira kedudukan baharu elemen berdasarkan kedudukan tetikus dan offset.
Mengemas kini sifat CSS kiri dan atas elemen untuk mengalihkannya ke kedudukan baharu.

Berhenti Menyeret: Fungsi stopDragging dicetuskan apabila pengguna melepaskan butang tetikus. Fungsi ini:

Mengalih keluar kelas seret untuk mengembalikan kursor kepada keadaan asalnya.
Mengalih keluar pendengar acara gerak tetikus daripada dokumen untuk menghentikan penyeretan. Baca Lagi

kesimpulan:
Dengan memahami asas pendengar acara dan manipulasi DOM, kami boleh menambah interaktiviti pada projek web kami, meningkatkan pengalaman pengguna.

Baca artikel penuh- klik di sini

Atas ialah kandungan terperinci Mencipta Elemen Boleh Seret Menggunakan HTML, CSS dan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!