Dynamic Drag and Drop Grid Layout Plugin With jQuery - Gridly

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.