Atribut draggable dan Peristiwa dragstart
Jadikan elemen boleh diseret dan beri respons kepada dragstart
Atribut draggable dan Peristiwa dragstart ialah pelajaran HTML Academy 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 HTML Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus HTML Academy merangkumi sejumlah 4 pelajaran.
Atribut Seretan
Mana-mana elemen menjadi sumber seretan apabila anda menetapkan draggable="true". Pautan dan imej boleh diseret secara lalai; elemen lain (div, li, span) memerlukan atribut tersebut secara jelas. draggable="false" mengecualikan elemen daripada seretan natif.
<div draggable="true" id="card">Drag me</div>Peristiwa Permulaan Seretan
Apabila pengguna memulakan seretan, elemen sumber mencetuskan dragstart. Di sinilah anda memulakan seretan: rekodkan item yang sedang dipindahkan, gayakan item itu jika perlu, dan tulis data ke dalam objek dataTransfer yang akan dibaca oleh sasaran pelepasan.
card.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text/plain", card.id);
});Tanpa Permulaan Seretan, Tiada Apa-apa Berlaku
Jika anda menandakan elemen sebagai boleh diseret tetapi tidak mengendalikan peristiwa permulaan seretan, pelayar masih menyeret imej bayangan tetapi tiada data ditetapkan, jadi kebanyakan sasaran pelepasan akan menolak pelepasan tersebut. Sentiasa padankan atribut boleh seret dengan pendengar peristiwa permulaan seretan yang menyimpan sekurang-kurangnya satu pengecam.
Menetapkan effectAllowed
e.dataTransfer.effectAllowed = "move" dalam peristiwa permulaan seretan mengehadkan operasi kepada: "salin", "pindah", "pautan", "copyMove", "semua" atau "tiada". Tetapan ini menentukan kursor yang dipaparkan oleh pelayar serta dropEffect yang boleh ditetapkan oleh sasaran kemudian.
Menambah Petunjuk Visual
Tambahkan kelas CSS pada sumber supaya ia kelihatan malap semasa diseret: card.classList.add("dragging"). Buang kelas itu dalam peristiwa tamat seretan dragend supaya gaya dikosongkan sama ada pelepasan berjaya atau dibatalkan dengan Escape.
Imej Seretan Tersuai
Secara lalai, pelayar menyeret petikan lut sinar sumber. Gantikannya dengan e.dataTransfer.setDragImage(node, offsetX, offsetY) — hantar elemen DOM tersembunyi atau Image untuk memaparkan pratonton tersuai pada kursor.
const ghost = document.getElementById("drag-preview");
card.addEventListener("dragstart", (e) => {
e.dataTransfer.setDragImage(ghost, 20, 20);
});Peristiwa Tamat Seretan
dragend berlaku pada sumber selepas seretan selesai, sama ada dilepaskan dengan berjaya, dilepaskan pada sasaran tidak sah atau dibatalkan. Gunakannya untuk kerja pembersihan — membuang kelas dragging, menyembunyikan pratonton bayangan dan memulihkan kelegapan.
Mengesan Pembatalan
Dalam peristiwa tamat seretan, semak e.dataTransfer.dropEffect. Jika nilainya ialah "tiada", pelepasan tidak berlaku (sasaran menolak, pengguna menekan Escape atau pelepasan berlaku di luar halaman). Jika tidak, nilainya sama dengan kesan yang dipilih oleh sasaran pelepasan ("pindah", "salin", "pautan").
Seretan pada Peranti Sentuh
Seretan dan pelepasan natif mengutamakan komputer meja. Pada peranti sentuh, API itu hampir tidak berfungsi tanpa polyfill atau pengganti berasaskan Peristiwa Penunjuk. Untuk antara muka pengguna susun semula yang mesra mudah alih, utamakan pustaka seperti SortableJS atau dnd-kit yang mengabstrakkan kedua-dua model peristiwa.
Pertimbangan Kebolehcapaian
Seretan dan pelepasan natif tidak boleh diakses melalui papan kekunci — pengguna yang hanya menggunakan papan kekunci tidak boleh menyusun semula item. Sentiasa sediakan alternatif: pengendali kekunci anak panah, butang naikkan/turunkan atau dialog susun semula yang dikawal oleh atribut aria. Seretan dan pelepasan sepatutnya mempertingkatkan pengalaman, bukan menggantikannya.
Melumpuhkan Lalai Pelayar
Pemilihan teks dalam elemen yang boleh diseret boleh mengganggu seretan. Gunakan CSS user-select: none dan -webkit-user-drag: element pada sumber supaya pelayar menyeret elemen itu dan bukannya memilih teks di dalamnya.
Semakan Pengetahuan
Mengapakah anda biasanya mesti melampirkan pendengar peristiwa permulaan seretan walaupun atribut draggable="true" sahaja sudah menjadikan elemen itu boleh diseret?
Ringkasan
Tandakan sumber dengan draggable="true" dan gunakan peristiwa permulaan seretan untuk mengisi dataTransfer, menetapkan effectAllowed serta menetapkan imej seretan tersuai jika perlu. Padankannya dengan peristiwa tamat seretan untuk membersihkan gaya. Sediakan alternatif papan kekunci demi kebolehcapaian dan pertimbangkan polyfill untuk peranti sentuh.
Pelajari HTML 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
- 40
- Pelajaran
- 159
Soalan Lazim
Adakah pelajaran “Atribut draggable dan Peristiwa dragstart” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran HTML Academy, termasuk “Atribut draggable dan Peristiwa dragstart”, 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 HTML Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Atribut draggable dan Peristiwa dragstart”?
Jadikan elemen boleh diseret dan beri respons kepada dragstart Anda berlatih HTML Academy 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 HTML Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran HTML Academy 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 “Atribut draggable dan Peristiwa dragstart” 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 HTML Academy ini?
Ya. Setiap pelajaran HTML Academy 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
- Atribut draggable dan Peristiwa dragstart
- Peristiwa dragover dan drop
- Objek dataTransfer
- Senarai Seret untuk Menyusun Semula