Akademi JavaScript · Pelajaran

Menjadikan Elemen Boleh Diseret

Aktifkan seretan dan kendalikan peristiwa seret.

Pelajaran 1 daripada 413 langkah

Menjadikan Elemen Boleh Diseret ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

API Seret dan Lepas HTML

API Seret dan Lepas natif membolehkan pengguna mengambil elemen dan melepaskannya di tempat lain. API ini dipacu oleh peristiwa: elemen sumber mencetuskan peristiwa seretan, manakala target pelepasan mencetuskan peristiwanya sendiri. Tiada pustaka diperlukan.

Atribut Kebolehseretan

Secara lalai, hanya pautan dan imej yang boleh diseret. Tambahkan draggable="true" supaya mana-mana elemen boleh diseret.

<div draggable="true" id="card">Drag me</div>

Menetapkan Kebolehseretan dalam JS

Anda boleh mengubah keadaan tingkah laku itu daripada skrip melalui sifat draggable.

const card = document.getElementById("card");
card.draggable = true;

Peristiwa Memulakan Seretan

dragstart dicetuskan sebaik sahaja seretan bermula. Di sinilah anda merekodkan perkara yang sedang diseret.

card.addEventListener("dragstart", (e) => {
  console.log("Started dragging", card.id);
});

Membawa Data dengan dataTransfer

Peristiwa itu mendedahkan dataTransfer. Gunakan setData(format, value) dalam dragstart untuk melampirkan muatan yang bergerak bersama-sama seretan.

card.addEventListener("dragstart", (e) => {
  e.dataTransfer.setData("text/plain", card.id);
});

Peristiwa Seretan

drag dicetuskan secara berterusan semasa elemen bergerak. Gunakannya secara berhemat — peristiwa ini boleh dicetuskan berkali-kali sesaat.

card.addEventListener("drag", (e) => {
  // fires repeatedly during the drag
});

Peristiwa Menamatkan Seretan

dragend dicetuskan apabila pengguna melepaskan elemen, tanpa mengira sama ada pelepasan itu berjaya. Gunakannya untuk menetapkan semula sebarang gaya sumber.

card.addEventListener("dragend", (e) => {
  card.classList.remove("dragging");
});

Menandakan Elemen Sumber

Pola yang biasa digunakan ialah add kelas pada dragstart dan remove kelas itu pada dragend untuk meredupkan atau menyerlahkan item yang diseret.

card.addEventListener("dragstart", () => card.classList.add("dragging"));
card.addEventListener("dragend", () => card.classList.remove("dragging"));

Kesan yang Dibenarkan

Set effectAllowed dalam dragstart untuk mengisytiharkan operasi yang sah: "copy", "move", "link" atau gabungannya.

card.addEventListener("dragstart", (e) => {
  e.dataTransfer.effectAllowed = "move";
});

Perhatian untuk Peranti Sentuh

API natif mempunyai sokongan sentuh yang terhad pada peranti mudah alih. Untuk aplikasi yang mengutamakan sentuhan, pertimbangkan Peristiwa Penuding atau pustaka khusus; API natif lebih menyerlah pada komputer meja.

Melumpuhkan Pemilihan Teks

Seretan boleh memilih teks secara tidak sengaja. Satu peraturan CSS kecil memastikan seretan kekal kemas.

/* CSS */
.draggable { user-select: none; }

Semakan Pantas

Uji asas kebolehseretan.

Jawab dalam pelajaran interaktif

Ringkasan: Menjadikan Elemen Boleh Diseret

Anda mengaktifkan seretan dengan draggable="true", mengendalikan dragstart/drag/dragend, melampirkan muatan melalui dataTransfer.setData, menetapkan effectAllowed dan menggayakan sumber. Seterusnya: target pelepasan.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 59
Pelajaran: 200

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Menjadikan Elemen Boleh Diseret” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Menjadikan Elemen Boleh Diseret”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Menjadikan Elemen Boleh Diseret”?

Aktifkan seretan dan kendalikan peristiwa seret. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Menjadikan Elemen Boleh Diseret” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?

Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Akademi JavaScript