jquery.gridster.js: How to Display Multiple Draggable Grid Areas

Using draggable grid areas is a common technique for creating dynamic and interactive layouts in websites or applications.
In this article, we introduce how to easily implement draggable grid areas using the jQuery plugin Gridster.js. We will explain with specific code examples.

What is Gridster.js?

Gridster.js is one of the jQuery plugins that allows you to easily create draggable grid layouts. With this plugin, users can freely move widgets within the grid or resize them.

Styling Grid Areas with CSS

First, let’s take a look at the CSS code used to style the grid area.
Load the jquery.gridster.min.css file. This is the CSS for multiple grid areas (.gridster). Modify it as needed.
Use the following CSS code to define the styles for the grid areas used by Gridster.js.

<link rel="stylesheet" type="text/css" href="jquery.gridster.min.css">
<style>
body {
  font-size: 16px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.6em;
  padding: 20px 0;
}
p{
  padding-bottom: 20px;
}
.gridster .gs-w {
  background: #61A9CF;
  cursor: pointer;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.gridster .player {
  -webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  background: #BBB;
}
.gridster .preview-holder {
  border: none !important;
  border-radius: 0 !important;
  background: red !important;
}
.gridster ul {
  background-color: #EFEFEF;
}
.gridster li {
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  line-height: 100%;
}
ul {
  list-style-type: none;
}
li {
  list-style: none;
  font-weight: bold;
}
.controls {
  margin-bottom: 20px;
}
</style>

Create Grid Areas with HTML

Next, create the grid area using HTML.
Use the following HTML code to prepare the area (class=”gridster”) that will contain multiple grid areas.

<h1>Display Draggable Grid Areas Using jquery.gridster.js</h1>
<p>Try dragging and dropping the grid areas below.</p>

<div class="gridster">
    <ul></ul>
</div>

Configure Grid Areas with JavaScript

Finally, use JavaScript to configure the grid area.
The following JavaScript code initializes Gridster.js and adds draggable widgets to the grid area.

Load jquery.min.js (1.7.1) and jquery.gridster.min.js.
Write $(“grid display area”).gridster({options}). Use the options to set the margins, dimensions, etc. of the grid area.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" id="code">
    var gridster;

    $(function () {

        gridster = $(".gridster > ul").gridster({
            widget_margins: [5, 5],
            widget_base_dimensions: [100, 55]
        }).data('gridster');

        var widgets = [
            ['<li>0</li>', 1, 2],
            ['<li>1</li>', 3, 2],
            ['<li>2</li>', 3, 2],
            ['<li>3</li>', 2, 1],
            ['<li>4</li>', 4, 1],
            ['<li>5</li>', 1, 2],
            ['<li>6</li>', 2, 1],
            ['<li>7</li>', 3, 2],
            ['<li>8</li>', 1, 1],
            ['<li>9</li>', 2, 2],
            ['<li>10</li>', 1, 3]
        ];

        $.each(widgets, function (i, widget) {
            gridster.add_widget.apply(gridster, widget)
        });

    });
</script>

　
In the JavaScript code above, jQuery and the Gridster.js library are first loaded.
Then, the gridster object is initialized, and several widgets are added to the grid area.
Widgets are defined as list items (<li>), and each widget’s size and position are also specified.

Demo Page: Display Draggable Grid Areas Using jquery.gridster.js

You can check the working demo page from the link below.
Feel free to try dragging and dropping with your own hands.

Demo page: Display draggable grid areas using jquery.gridster.js

Source: gridster.js

gridster.js

By incorporating such dynamic layouts, you can greatly enhance the user experience of your web applications.
It is especially useful for creating customizable dashboards or widgets that help visualize data.

Summary

In this article, we introduced how to implement draggable grid areas using the jQuery plugin Gridster.js.
With concrete examples of CSS, HTML, and JavaScript, the content is easy to understand.
By utilizing Gridster.js, you can create user-friendly interactive layouts — be sure to try it out.

　
*If you reuse this content, please do so at your own responsibility.
Do not reuse the Google Analytics tag inside the demo page’s <head> tag.*