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><br>

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>


<section class="example">
  <div class="gridly">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick"></div>

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.

  // settings here

6. All default settings to config the grid layout.


  // 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.


  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');

View Demo




Code Here:



Please enter your comment!
Please enter your name here