Tutorial Membuat Drag n Drop

Membuat Drag n Drop

Dari semua teknologi, web developer perlu untuk menguasai teknologi meskipun tidak semua teknologi harus dikuasai, tampaknya salah satu yang menyebabkan kebingungan dan memiliki potensi masalah adalah drag n drop.

Ini bukan teknologi baru, sudah sekitar selama bertahun-tahun, namun banyak pengembang yang masih menggunakan metode lama berdasarkan jQuery untuk melibatkan emulasi drag-and-drop yang rumit (kadang-kadang lambat dan tidak akurat).

Sekarang HTML5 memasukkan drag-n-drop dalam API mereka, sehingga sekarang Anda sudah memiliki cara yang sangat sederhana untuk menerapkan drag n drop tanpa sakit kepala.

Memahami mekanisme Drag n Drop

Drag-n-drop mudah dimengerti. Anda memiliki objek dan target. Tujuannya adalah untuk memungkinkan pengguna untuk mengklik pada objek dan tarik ke target atau tempat dimana objek akan diletakkan, maka aplikasi Anda perlu untuk merespon hal tersebut dengan tepat.

Membuat template halaman web

Ini sangat sederhana, tapi kita perlu memiliki tempat untuk meletakkan semua kode dari item objek. Hal paling dasar adalah halaman web template yang perlu Anda buat adalah:

Mendefinisikan objek draggable

Anda mungkin mengharapkan beberapa definisi JavaScript yang sedikit rumit di sini, tapi sebenarnya ini semudah menetapkan atribut “draggable” pada elemen di bagian <body>, yang perlu anda lakukan adalah menambahkan kode di bawah ini kedalam tag <body> pada kode sebelumnya:

Tutorial lainya   Tutorial Membuat Navigasi Tab yang Responsif

Jadi seperti yang Anda lihat, benar-benar sangat sederhana bukan? Bahkan, untuk beberapa browser Anda bahkan tidak perlu menentukan atribut untuk beberapa jenis elemen, tapi masih merupakan ide yang baik untuk tetap melakukannya.

Mendefinisikan target

Targetnya adalah zona di mana objek Anda dapat diseret ke tempat / zona yang telah disediakan. Sekali lagi, itu cukup sederhana, Anda hanya perlu memberikan atribut target ID pada CSS.

Tambahkan beberapa CSS

Kami harus memastikan bahwa semuanya terlihat dengan cara yang seharusnya terlihat. Tambahkan informasi berikut style CSS ke bagian <head> pada file HTML yang anda buat sebelumnya:

Tutorial lainya   Cara Menambahkan Meta Description Pada Blogger

Implementasi fungsi JS

Langkah ini hanya untuk memastikan aplikasi Anda menyadari keberadaan benda-benda yang merupakan sebuah objek dan selain itu, objek harus berinteraksi dengan mereka. Anda dapat mengambil pendekatan yang sedikit rumit jika Anda perlu dan menciptakan serangkaian “event listeners”, tetapi Anda tidak benar-benar membutuhkan sesuatu yang rumit untuk menangani dasar dari drag n drop.

Kita Benar-benar hanya perlu mendefinisikan dua fungsi yang akan menangani semua saat bergerak yaitu: dragObject dan dropObject.

Hal-hal tentang mencegah default dan berhenti propagasi hanya untuk mengesampingkan perilaku default browser, yang mungkin menyebabkan itu untuk mencoba dan menavigasi suatu tempat atau membuka gambar sebagai link, misalnya. The pindah variabel mencegah kode dari mengeksekusi setelah tindakan telah dilakukan.

Tutorial lainya   Membuat Website Responsive Tanpa Coding

Memodifikasi objek dan deklarasi target

Tidak ada yang akan terjadi jika fungsi tidak pernah dipanggil. Anda hanya perlu mengubah deklarasi dari objek dan target seperti ini:

dan

Demikian artikel dari saya, ini hanya pengenalan dasar konsep drag-n-drop, Anda dapat menemukan semua yang anda perlu tahu dengan mengunjungi situs resmi spesifikasi HTML untuk drag-and-drop.

Drag n Drop Demo
Penulis Tutorial

Penulis Tutorial

Kata terindah

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *