Dynamic Drag and Drop Grid Layout Plugin With jQuery - Gridly
File Size: | 138 KB |
---|---|
Views Total: | 28825 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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
<script src="/path/to/cdn/jquery.min.js"></script>
2. Include the jQuery Gridly plugin's files on the page, after jQuery library.
<link href="stylesheets/jquery.gridly.css" rel="stylesheet" /> <script src="javascripts/jquery.gridly.js"></script>
3. Insert grid items to the gridly.
<section class="example"> <div class="gridly"> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> <div class="brick"></div> ... </div> </section>
4. The example CSS styles for the grid.
.example { position: relative; } .example .brick { float: left; cursor: pointer; margin-right: 20px; margin-bottom: 20px; width: 140px; height: 140px; }
5. Initialize the draggable grid layout.
$('.gridly').gridly({ // settings here });
6. All default settings to config the grid layout.
$('.gridly').gridly({ // base size in px base: 60, // gutter in px gutter: 20, // number of columns columns: 12, // drag handle draggable: { zIndex: 800, selector: '> *' } });
7. Callback functions.
$('.gridly').gridly({ callbacks: { reordering: function($elements) { // Called when rendering }; reordered: function($elements) { // Called after rendered }; } });
8. Enable/disable the draggable functionality.
$('.gridly').gridly('draggable', 'on); $('.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.