Dynamic Drag Drop Grid Layout Plugin With jQuery Gridly - Free Download Dynamic Drag and Drop Grid Layout Plugin With jQuery - Gridly

Free Download Dynamic Drag and Drop Grid Layout Plugin With jQuery – Gridly

By Posted on

This time I will share jQuery Plugin and tutorial about Dynamic Drag and Drop Grid Layout Plugin With jQuery – Gridly, hope it will help you in programming stack.

Dynamic Drag Drop Grid Layout Plugin With jQuery Gridly - Free Download Dynamic Drag and Drop Grid Layout Plugin With jQuery - Gridly
File Size: 138 KB
Views Total: 25323
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Gridly is a touch-enabled, jQuery based draggable grid layout plugin that allows your visitors to dynamically rearrange grid items through drag’n’drop or touch events.

How to use it:

1. Include the necessary jQuery library on the web page

view source
1 <script src="/path/to/cdn/jquery.min.js"></script><br>

2. Include the jQuery Gridly plugin’s files on the page, after jQuery library.

view source
1 <link href="stylesheets/jquery.gridly.css" rel="stylesheet" />
2 <script src="javascripts/jquery.gridly.js"></script>

3. Insert grid items to the gridly.

view source
1 <section class="example">
2   <div class="gridly">
3     <div class="brick"></div>
4     <div class="brick"></div>
5     <div class="brick"></div>
6     <div class="brick"></div>
7   ...
8   </div>
9 </section>

4. The example CSS styles for the grid.

view source
01 .example {
02   position: relative;
03 }
04  
05 .example .brick {
06   float: left;
07   cursor: pointer;
08   margin-right: 20px;
09   margin-bottom: 20px;
10   width: 140px;
11   height: 140px;
12 }

5. Initialize the draggable grid layout.

view source
1 $('.gridly').gridly({
2   // settings here
3 });

6. All default settings to config the grid layout.

view source
01 $('.gridly').gridly({
02  
03   // base size in px
04   base: 60,
05  
06   // gutter in px
07   gutter: 20,
08  
09   // number of columns
10   columns: 12,
11  
12   // drag handle
13   draggable: {
14     zIndex: 800,
15     selector: '> *'
16   }
17    
18 });

7. Callback functions.

view source
01 $('.gridly').gridly({
02  
03   callbacks: {
04     reordering: function($elements) {
05       // Called when rendering
06     };
07     reordered: function($elements) {
08       // Called after rendered
09     };
10   }
11    
12 });

8. Enable/disable the draggable functionality.

view source
1 $('.gridly').gridly('draggable', 'on);
2 $('.gridly').gridly('draggable', 'off');

Changelog:

v1.3.0 (2020-07-01)

  • Updated to the latest version
  • Updated doc accordingly

v1.2.9 (2015-05-28)

  • updated to the latest version

v1.2.8 (2015-01-24)

  • updated to the latest version

v1.2.6 (2014-12-17)

  • updated to the latest version

v1.2.5 (2014-12-06)

  • updated to the latest version

v1.2.3 (2014-02-11)

  • updated to the latest version

v1.2.0 (2013-09-06)

  • updated to the latest version
  • demo page updated

v1.1.8 (2013-08-26)

  • fixing a bug where the ‘close’ button is draggable

This awesome jQuery plugin is developed by ksylvest. For more Advanced Usages, please check the demo page or visit the official website.

Related posts: