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>

3.

<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');
/www.jqueryscript.net

View Demo

Copyright{}

Website:https:www.jqueryscript

URL: DEMO

https://www.jqueryscript.net/layout/Dynamic-Drag-Drop-Grid-Layout-Plugin-With-jQuery-Gridly.html

Code Here:

https://www.jqueryscript.net/layout/Dynamic-Drag-Drop-Grid-Layout-Plugin-With-jQuery-Gridly.html

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here