Tambah Drag & Drop ke Laman Web Mudah dengan Dragula

Mencari perpustakaan percuma untuk mengendalikan ciri drag & drop? Kemudian Dragula adalah satu-satunya sumber yang anda perlukan.

Skrip percuma ini membolehkan anda tambahkan ciri seret & lepas untuk sebarang elemen pada halaman anda. Ini termasuk sokongan untuk kerangka Reakt & AngularJS, bersama-sama dengan JavaScript vanila.

Dragula sangat mudah untuk didirikan dan ia datang dengan sekumpulan pencetus tersuai untuk tingkah laku pengguna. Ini bermakna anda boleh menyerang fungsi anda sendiri setelah pengguna menyeret item, mengklik item, atau menyusun semula bahagian mana-mana halaman.

Sekiranya anda mengintip demo hidup anda, anda akan dapati beberapa coretan kod, bersama dengan contoh yang boleh digunakan.

Persediaan Dragula hanya memerlukan fail JavaScript tunggal untuk mendapatkannya bekerja. Walaupun, pilihan tambahan boleh sedikit mengelirukan.

Sebagai contoh, katakan anda mempunyai dua bekas, #ditinggalkan dan #right, bahawa anda ingin menyokong item draggable. Anda perlu tambah bekas ini ke fungsi Dragula untuk menyokong kaedah drag & drop.

Jika anda tidak mempunyai pemahaman yang kukuh tentang asas-asas pembangunan front-end maka anda akan berjuang menggunakan Dragula. Tetapi, repo GitHub mempunyai banyak contoh hebat yang boleh anda ikuti bersama dan juga coretan kod yang anda boleh salin.

Berikut adalah satu contoh dari dokumentasi GitHub untuk bagaimana sasarkan bekas (kiri dan kanan):

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

Perhatikan jika anda melihat lebih jauh pada halaman GitHub yang anda akan dapati senarai besar pilihan anda boleh lulus ke fungsi ini.

Awak boleh pilih sama ada untuk menyalin atau memindahkan item, yang bekas (s) menyokong item yang diseret dan juga fungsi panggil balik yang berfungsi melalui tingkah laku pengguna yang berbeza seperti:

Berlegar di atas bekas
Acara klik & seret awal
Drop event
Menurunkan elemen dari batas
Pengklonan elemen / bekas dengan menyeret

Perpustakaan ini akan mengambil kerja awal tetapi jika anda biasa dengan JavaScript, ia mestilah menjadi tidak berani.

Lihat halaman demo untuk lihat bagaimana ia berfungsi dan kepada dapatkan beberapa idea sampel kod. Dragula adalah perpustakaan besar dan mungkin skrip sumber terbuka terbaik mengendalikan seret & lepaskan, dengan pelbagai penyesuaian.