Tambahkan Seret & Jatuhkan ke Situs Web dengan Mudah dengan Dragula

Mencari perpustakaan gratis untuk menangani fitur seret & lepas? Kemudian Dragula adalah satu-satunya sumber daya yang Anda perlukan.

Skrip gratis ini memungkinkan Anda tambahkan fitur seret & lepas untuk elemen apa pun di halaman Anda. Ini termasuk dukungan untuk kerangka kerja React & AngularJS, bersama dengan vanilla JavaScript.

Dragula super mudah diatur dan disertai sekelompok pemicu khusus untuk perilaku pengguna. Ini berarti Anda dapat menjalankan fungsi Anda sendiri setelah pengguna menyeret item, mengklik item, atau mengatur ulang bagian halaman mana pun.

Jika Anda mengintip demo langsung, Anda akan menemukannya beberapa cuplikan kode, bersama sampel yang dapat digunakan.

Pengaturan Dragula hanya membutuhkan satu file JavaScript untuk membuatnya bekerja. Meskipun, opsi tambahan bisa sedikit membingungkan.

Misalnya, Anda memiliki dua wadah, #kiri dan #kanan, Anda ingin mendukung item yang dapat diseret. Anda harus melakukannya secara manual tambahkan wadah ini ke fungsi Dragula untuk mendukung metode seret & lepas.

Jika Anda tidak memiliki pemahaman yang kuat tentang dasar-dasar pengembangan front-end maka Anda akan kesulitan untuk menggunakan Dragula. Tapi, repo GitHub punya banyak contoh-contoh hebat yang bisa Anda ikuti dan bahkan cuplikan kode yang dapat Anda salin.

Inilah satu contoh dari dokumen GitHub untuk caranya menargetkan dua kontainer (kiri dan kanan):

 dragula ([document.querySelector ('# left'), document.querySelector ('# right')]);

Catatan jika Anda melihat lebih jauh pada halaman GitHub Anda akan menemukan daftar opsi yang sangat banyak Anda dapat beralih ke fungsi ini.

Kamu bisa memilih apakah akan menyalin atau memindahkan item, wadah mana yang mendukung item yang diseret dan bahkan fungsi panggilan balik yang bekerja melalui berbagai perilaku pengguna seperti:

Melayang di atas wadah
Klik & seret acara awal
Jatuhkan acara
Menjatuhkan elemen di luar batas
Mengkloning elemen / wadah dengan menyeret

Perpustakaan ini akan mengambil beberapa pekerjaan awal tetapi jika Anda terbiasa dengan JavaScript, ia haruslah orang yang cerdas.

Lihat ke halaman demo untuk lihat cara kerjanya dan untuk dapatkan beberapa ide contoh kode. Dragula adalah perpustakaan besar dan mungkin merupakan skrip open-source terbaik untuk itu menangani seret & lepas, dengan rentang penyesuaian terluas.