Build Responsive Sortable Grid Layouts med dette script

Brugerdefinerede net er nogle af de hårdeste funktioner til at oprette fra bunden. Du kan finde masser af murværk gitter plugins, men de hver har deres egne begrænsninger og krav.

Det Muuri script er et stærkt alternativ til enhver, der har brug for sorterbare og lydhøre gridelementer med touch support.

Det er bygget på Velocity.js for animationerne, sammen med Hammer.js bibliotek til håndtering af mobil touch. Muuri gør ikke kræver jQuery, så det er et af de få vanille JavaScript plugins til grid interfaces.

På hovedprojektsiden finder du en smukke grid demo med alle funktionerne. Animationseffekter, træk og slip support og forskellige gitterelementer af forskellig størrelse. Denne demonstration viser kun, hvor meget kontrol du har med et Muuri-net.

Du kan vælge hvilke elementer der skal vises, baseret på klasser (dvs. filtrering) sammen med hvordan du vil udfylde tomme mellemrum.

Masonry gitter forlader ofte tomme pletter fordi Gitterelementer passer ikke altid perfekt sammen. Dette er ret typisk for større websites som Pinterest. Selvom du kan tilføj trækelementer til stort set enhver brugerstyret grænseflade.

Tænke over sociale profiler med widgetized layouts og hvordan de ville arbejde. Eller tænk over brugerdefinerede opgavelister, der kører som progressive webapps på JavaScript. Der er faktisk en fantastisk demo på denne på Muuri-siden, der viser en prøveopgave-liste, og hvordan den kan fungere som en PWA på mobilen.

For at komme i gang, du bare inkludere alle JavaScript afhængigheder sammen med Muuri scripts. Du kan trække dem ned gennem npm eller tag en kopi fra GitHub repo.

Så er det dig Opret et containernettet element og mål det med en ny forekomst af Muuri () metode. Det er alt ret simpelt og især nemt at bruge ved at kopiere kodestykker fra GitHub repo.

Med fuld støtte til alle moderne browsere (IE9 +) og en touch-enabled interface, dette plugin er et af de bedste til drag & drop grid funktioner.

Få mere at vide ved at læse Muuri-hjemmesiden og tinker med de levende demoer. Dette er en godt system til dynamiske net ogdet er stadig i aktiv udvikling, så du kan stole på, at denne plugin kommer til at eksistere for lang tid.