MoreLesson 274Preview gratis
Draggable HTML Element
Lesson ini bagian dari How To · Semua level
Ringkasan
Elemen HTML dapat dibuat dapat digeser dengan pointer event. Saat pointer ditekan, catat posisi awal elemen dan pointer, lalu perbarui posisi elemen ketika pointer bergerak. Gunakan pointer capture agar gerakan tetap terlacak meski kursor keluar dari elemen, dan sediakan alternatif keyboard.
Poin kunci
- pointerdown memulai proses drag, pointermove memperbarui posisi, pointerup mengakhiri.
- getBoundingClientRect() memberi posisi dan ukuran elemen relatif terhadap viewport.
- Elemen yang digeser biasanya memakai position: absolute atau fixed.
- setPointerCapture memastikan event pointer tetap diterima selama drag.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.