Responsive Filterable Draggable Grid System Muuri - Download Responsive Filterable And Draggable Grid System - Muuri

Download Responsive Filterable And Draggable Grid System – Muuri

By Posted on

This time I will share jQuery Plugin and tutorial about Responsive Filterable And Draggable Grid System – Muuri, hope it will help you in programming stack.

Responsive Filterable Draggable Grid System Muuri - Download Responsive Filterable And Draggable Grid System - Muuri
File Size: 77.9 KB
Views Total: 8151
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Muuri.js is a powerful jQuery plugin used to generate a responsive, dynamic, animated, sortable, filterable grid layout for your modern web projects.

Key features:

  • Allows to re-sort grid items via drag and drop. Requires hammer.js.
  • Allows to filter/search through grid items via input field.
  • Smooth, fast animations based on Velocity.js.
  • Auto resizes and re-positions grid items on window resize.
  • Lots of API methods and events.

View more:

How to use it:

1. Include the latest version of jQuery library and other required JS resources on the webpage.

view source
1 <script src="/path/to/jquery-3.1.1.min.js"></script>
2 <script src="/path/to/velocity.min.js"></script>
3 <script src="/path/to/hammer.min.js"></script>

2. Add initial grid items to the layout system.

view source
01 <div class="grid">
02  
03   <div class="item">
04     <div class="item-content">
05       Item 1
06     </div>
07   </div>
08  
09   <div class="item">
10     <div class="item-content">
11       Item 2
12     </div>
13   </div>
14  
15   <div class="item">
16     <div class="item-content">
17       Item 3
18     </div>
19   </div>
20  
21 </div>

3. Apply your own CSS styles to the grid items and drag handlers.

view source
01 .grid {
02   position: relative;
03   margin: 20px 0;
04   border: 5px solid #ff0000;
05   -moz-box-sizing: content-box;
06   -webkit-box-sizing: content-box;
07   box-sizing: content-box;
08 }
09  
10 .item {
11   position: absolute;
12   width: 100px;
13   height: 100px;
14   line-height: 100px;
15   margin: 5px;
16   z-index: 1;
17 }
18  
19 .item.muuri-dragging, .item.muuri-releasing { z-index: 9999; }
20  
21 .item.muuri-dragging { cursor: move; }
22  
23 .item.muuri-hidden { z-index: 0; }
24  
25 .item.h2 {
26   height: 210px;
27   line-height: 210px;
28 }
29  
30 .item.w2 { width: 210px; }
31  
32 .item-content {
33   position: relative;
34   width: 100%;
35   height: 100%;
36 }
37  
38 .item-stuff {
39   position: absolute;
40   left: 0;
41   top: 0;
42   right: 0;
43   bottom: 0;
44   text-align: center;
45   font-size: 24px;
46   background: #000;
47   color: #fff;
48   -moz-transform: scale(1) translateZ(0);
49   -webkit-transform: scale(1) translateZ(0);
50   -o-transform: scale(1) translateZ(0);
51   -ms-transform: scale(1) translateZ(0);
52   transform: scale(1) translateZ(0);
53   -webkit-transition: -webkit-transform 0.2s ease-out, background-color 0.2s ease-out;
54   -moz-transition: -moz-transform 0.2s ease-out, background-color 0.2s ease-out;
55   -ms-transition: -ms-transform 0.2s ease-out, background-color 0.2s ease-out;
56   -o-transition: -o-transform 0.2s ease-out, background-color 0.2s ease-out;
57   transition: transform 0.2s ease-out, background-color 0.2s ease-out;
58 }
59  
60 .item.muuri-dragging .item-stuff {
61   background: #ff0000;
62   -moz-transform: scale(1.1) translateZ(0);
63   -webkit-transform: scale(1.1) translateZ(0);
64   -o-transform: scale(1.1) translateZ(0);
65   -ms-transform: scale(1.1) translateZ(0);
66   transform: scale(1.1) translateZ(0);
67 }

4. Create a new Muuri object to initialize the grid layout.

view source
1 var grid = new Muuri({
2     // options here
3 });

5. All default options to customize the grid layout.

view source
01 var source : jqueryscript.net

Related posts: