Dynamic Drag and Drop Grid Layout Plugin With jQuery - Gridly

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

Gridly is a jQuery and jQuery UI based layout plugin that allows your visitors to dynamically rearrange the grid layout by dragging and dropping.

How to use it:

1. Include jQuery library, jQuery UI on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js' type='text/javascript'></script>

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

<link href='stylesheets/jquery.gridly.css' rel='stylesheet' type='text/css'>
<script src='javascripts/jquery.gridly.js' type='text/javascript'></script>

3. Create the html

<section class='example'>
<div class='gridly'>
<div class='brick small'></div>
<div class='brick small'></div>
<div class='brick small'></div>
<div class='brick small'></div>
<div class='brick small'></div>
<div class='brick small'></div>
<div class='brick small'></div>
<div class='brick small'></div>
<div class='brick small'></div>
<div class='brick small'></div>
<div class='brick small'></div>
<div class='brick small'></div>
<div class='brick small'></div>
<div class='brick small'></div>
<div class='brick small'></div>
<div class='brick small'></div>
<div class='brick small'></div>
<div class='brick small'></div>
<div class='brick small'></div>
<div class='brick small'></div>
</div>
</section>

4. The CSS for the example

.example {
position: relative;
}
.example .brick {
float: left;
cursor: pointer;
margin-right: 20px;
margin-bottom: 20px;
}
.example .brick.small {
width: 140px;
height: 140px;
}
.example .brick.large {
width: 300px;
height: 300px;
}

5. The javascript

(function() {
  $(function() {
    $('.gridly').gridly({
      columns: 12
    });
    $('.gridly').gridly('draggable');
    return $('.gridly .brick').click(function(event) {
      var size;
      event.preventDefault();
      event.stopPropagation();
      $(this).toggleClass('small');
      $(this).toggleClass('large');
      if ($(this).hasClass('small')) {
        size = 140;
      }
      if ($(this).hasClass('large')) {
        size = 300;
      }
      $(this).data('width', size);
      $(this).data('height', size);
      return $('.gridly').gridly('layout');
    });
  });

}).call(this);

6. Default settings.

$('.gridly').gridly({
base: 60,
gutter: 20,
columns: 12,
draggable: {
  zIndex: 800,
  selector: '> *'
}
});

Change logs:

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.