Home

Draggable dengan Javascript

Mari berdiskusi bersama kami di Group Facebook Kurung Kurawal

Anda tentu pernah melihat suatu website dimana satu atau lebih elementnya dapat dipindah-pindah dengan metode drag. Apa itu drag? menarik objek? Kurang lebih artinya seperti itu, dengan “draggable object”, kita dapat memindahkan sebuah objek di halaman website (bahkan pada windows, tapi kita batasi pada halaman web saja) hanya dengan menekan mouse, tahan, dan gerakkan mouse tersebut menuju lokasi baru yang diinginkan, kemudian lepaskan mouse. Objek pun berpindah tempat.

Salah satu sifat pemrograman Javascript adalah event-based. Artinya, Javascript dapat “listen” pada event atau kejadian tertentu yang terjadi pada halaman webnya. Event atau kejadian ini bisa berupa misalnya, user mengetik, user fokus pada textbox, user klik tombol, user menekan tombol, dan user melepaskan tekanan tombol.

Draggable, sebenarnya hanya memanipulasi posisi objek (left dan top) agar selalu berubah mengikuti posisi mouse ketika bergerak. Perubahan posisi ini terjadi ketika mouse bergerak. Tapi tentu saja, tidak setiap pergerakan mouse akan merubah posisi. Karena kita tentu tidak mau, objek terus bergerak hanya gara-gara kita menggerakkan mouse, bukan?

Drag, adalah ketika tombol mouse (kiri) ditekan, kemudian bergerak, dan ketika selesai, tombol dilepas. Dengan demikian, secara konsep awal, kita akan membuat Javascript menghitung ulang dan menempatkan objek pada posisi tertentu ketika mouse bergerak (onmousemove), namun setelah diawali dengan menekan mouse (onmousedown) pada objek tersebut. Dan setelah tombol dilepas (onmouseup), jangan lagi menghitung atau “menggerakkan” objek.