Drag and Drop API ialah bab dari HTML5. Drag and Drop API memungkinkan kita memutuskan elemen-elemen tertentu untuk sanggup didrag, lalu memutuskan apa yang perlu terjadi saat elemen itu diseret di atas atau didrop pada elemen-elemen lain yang ada di halaman.
Coba anda drag gambar yang ada di kotak pertama ke kotak disebelahnya secara urut, atau juga secara acak:
Di HTML5 semua elemen sanggup di Drag and Drop. Pastikan browser yang anda gunakan ialah IE9, Firefox, Opera12, Chrome, dan Safari5.
Ada beberapa langkah untuk menambahkan Drag and Drop:
Agar suatu elemen sanggup didrag, pastikan atribut ONDRAGGABLE diset ke nilai true
:
Lalu tambahkan event listener untuk ONDRAGSTART pada elemen yang ingin anda memutuskan untuk sanggup didrag:
Di mana fungsi oDragStart()
yang dipanggil saat awal drag (atribut ONDRAGSTART) suatu elemen menyerupai berikut:
Tambahkan event listener untuk ONDRAGOVER dan ONDROP pada setiap elemen yang ingin anda memutuskan sebagai akseptor dari elemen yang didrag. ONDRAGOVER memilih di mana data/elemen yang didrag sanggup didrop.
Secara default, data/elemen tidak sanggup dijatuhkan ke dalam elemen lainnya. Untuk memungkinkanya, kita harus mencegah penanganan default dari elemen, dan hal ini sanggup dilakukan dengan memanggil EVENT.preventDefault() untuk ONDRAGOVER:
Sebagai teladan saja bahwa elemen yang menjadi daerah di mana elemen yang sedang didrag akan didrop ialah elemen DIV:
Terakhir, saat data/elemen yang didrag didrop, maka event DROP terjadi. Dalam teladan ini, atribut ONDROP memanggil fungsi berjulukan oDrop()
, misalnya:
Dimana fungsi oDrop()
menyerupai berikut:
Contoh instruksi akhir:
Seiring kemajuan zaman, maka proses perdaganganpun mengalami perubahan dan kemajuan dalam proses transaksinya. Oleh karena…
Berikut ini kami bagikan sebuah source code aplikasi akuntansi/akunting menggunakan framework yii, aplikasi ini cukup…
Salam sobat semua, kali ini kami akan membagikan sebuah aplikasi php secara gratis kepada anda,…
Deskripsi Aplikasi ASAMURAT yang merupakan kependekan dari Aplikasi SederhanA Manajemen sURAT. Sesuai dengan kepanjangannya, aplikasi…
Keunggulan Aplikasi Manajemen Surat ini : Memakai PHP Framework Codeigniter, sehingga frameworknya bisa lebih ringan,…