Bangun Layout Grid Sortable Responsif Dengan Script Ini

Kisi khusus adalah beberapa fitur terberat untuk dibuat dari awal. Anda dapat menemukan banyak plugin kotak batu tetapi mereka masing-masing memiliki keterbatasan & persyaratan mereka sendiri.

Itu Naskah Muuri adalah alternatif yang kuat bagi siapa saja yang membutuhkan elemen grid sortable & responsif dengan dukungan sentuh.

Itu dibangun di atas Velocity.js untuk animasi, Bersama dengan Perpustakaan Hammer.js untuk menangani sentuhan seluler. Muuri tidak membutuhkan jQuery, jadi itu adalah salah satu dari beberapa plugin JavaScript vanilla untuk antarmuka jaringan.

Pada halaman proyek utama, Anda akan menemukan a demo grid yang indah dengan semua fitur. Efek animasi, dukungan seret & lepas, dan elemen kisi yang berbeda dengan berbagai ukuran. Demo ini menampilkan seberapa banyak kontrol yang Anda miliki dengan kisi Muuri.

Kamu bisa memilih elemen mana yang akan ditampilkan, berdasarkan kelas (mis. pemfilteran), bersama dengan bagaimana Anda ingin mengisi ruang kosong.

Grid Masonry sering meninggalkan tempat kosong karena elemen grid tidak selalu cocok bersama dengan sempurna. Ini cukup khas untuk situs web yang lebih besar seperti Pinterest. Meskipun kamu bisa tambahkan item kisi yang dapat diseret untuk hampir semua antarmuka yang dikendalikan pengguna.

Memikirkan tentang profil sosial dengan tata letak widget dan bagaimana mereka akan bekerja. Atau, pikirkan daftar tugas kustom yang dijalankan sebagai aplikasi web progresif di JavaScript. Sebenarnya ada demo hebat dari ini di halaman Muuri yang menampilkan contoh daftar tugas yang harus dilakukan dan bagaimana itu bisa berfungsi sebagai PWA di seluler.

Untuk memulai, Anda baru saja termasuk semua dependensi JavaScript, bersama dengan skrip Muuri. Anda dapat menariknya turun melalui npm atau mengambil salinan dari repo GitHub.

Maka kamu buat elemen grid kontainer dan target itu dengan contoh baru dari Muuri () metode. Semuanya sangat sederhana dan sangat mudah digunakan dengan menyalin cuplikan kode dari repo GitHub.

Dengan dukungan penuh untuk semua browser modern (IE9 +) dan antarmuka yang mendukung sentuhan, plugin ini adalah salah satu yang terbaik untuk fitur drag & drop grid.

Pelajari lebih lanjut dengan membaca beranda Muuri dan bermain-main dengan demo langsung. Ini adalah sebuah sistem yang bagus untuk grid dinamis dan itu masih dalam pengembangan aktif, jadi Anda bisa percaya plugin ini akan ada untuk jangka panjang.