Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Tips Singkat: Membuat Fungsi Drag and Drop dengan JavaScript

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Dalam banyak aplikasi modern, pengembang mencadi cada untuk membuat interaksi pengguna menjadi lebih mudah dan intuitif. Sebuah fungsi drag and drop dapat membantu pengguna memilih beberapa objek secara cepat.

Langkah 1

Pertama kita harus membuat sebuah grup dari objek yang akan dipilih. Lebih sering, kebanyakan orang akan menggunakan skrip side server seperti C# atau PHP. Sementara hal itu melampaui cakupan tutorial ini, saya akan membuatnya dengan tangan. Kita bisa menggunakan hampir semua tag sebagai objek. Hal yang diperlukan hanyalah bahwa objek tersebut harus memiliki mouse event dasar yang ditetapkan. Di tutorial ini saya akan menggunakan tabel dengan 2 bari dan 5 kolom berisi DIV dengan beberapa CSS dasar untuk memberi mereka bentuk.

Hal yang paling penting dalam membuat objek adalah ID nya; mereka membutuhkan satu nama yang mirip. Milikku bernama 'box' - ditambah dengan sebuah nomor unik setelah nomornya. Karenanya, elemen pertama kami adalah 'box1' dan terakhir adalah 'box10'. Sekarang kita butuh untuk menambah mouse event. Untuk setiap DIV kita harus menetapkan "onmousedown" pada fungsi javascript dan melewati objek yang memanggil fungsi dengan kata kunci 'this'.

Langkah 2

Sekarang HTML dasar kita selesai, sekarang kita harus menulis javascript. Ada tiga bagian utama dari fungsi javascript kita: Aksi yang terjadi setiap kali memilih atau melepas objek, aksi yang mulai ketika men-drag objek, dan aksi ketika selesai men-drag objek. Sebelumnya kita harus membuat sebuah fungsi javaskrip dan memiliki satu objek 'obj' yang akan menjadi objek yang dipanggil di dalam event.

Untuk aksi yang muncul setelah sebua hobjek dipilih atau dilepas, pertama kita membutuhkan sebuah cara untuk fungsi kita agar tahu apakah objek tersebut masih dipilih atau tidak. Kamu bisa menggunakan banyak cara untuknya, tapi yang terbaik bagiku adalah dengan menggunakan CSS Class. CSS Class tidak hanya akan memberi tahu javascript ketika objek dipilih atau tidak namun kamu juga bisa menambahkan aturan CSS ke class yang dipilih sehingga pengguna secara visual dapat membedakan objek mana yang dipilih. Di javascript, yang kita butuhkan hanya pernyataan jika maka sederhanan. Untuk demo ini saya akan memperbaharui jangkauan total angka dari objek yang dipilih, tapi kamu juga bisa menggunakan fungsi ajax dan hal lain untuk membuat proses drag menjadi lebih bertenaga.

Untuk menggeser sebuah objek, kita akan menggunakan "for loop" untuk mengambil onmousedown milik objek dan menetapkannya ke onmouseover. Jika kita menggunakan skrip side server untuk memunculkan objek, kita juga ingin membagikan jumlah angka dari objek ke fungsi javascript sehingga pengulangannya akan bekerja. Namun, semenjak kita membuatnya dengan manual kita bisa menulis angkanya sendiri.

Aksi berhenti akan ditetapkan di onmouseup dari objek yang mulai dipilih. Untuk melakukannya, kita akan menggunakan fungsi anonim to memberi tahu javascript apa yang harus dilakukan ketika onmouseup terdeteksi. Lalu, kita akan gunakan "for loop" to menetapkan kembali onmouseup dan membuat onmouseover menjadi null.

Selesai! Jelas, tutorial ini sepele dan menggunakan embedded javacript (agar sederhana). Tapi saya yakin kamu dapat mengimajinasikan kemungkinannya! Punya cara yang lebih baik?

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.