gridstack.js is a mobile-friendly Javascript library for dashboard layout and creation. Making a drag-and-drop, multi-column dashboard has never been easier. gridstack.js allows you to build draggable, responsive bootstrap v3-friendly layouts. It also works great with knockout.js, angular.js, ember.
Join gridstack.js on Slack: https://gridstackjs.troolee.com
Table of Contents generated with DocToc
Version 1.0 is coming! Check out the blog post here for more information: https://dylandreams.com/2017/04/26/gridstack-10-coming-soon/ and subscribe to the blog for more gridstack news and tutorials.
Please visit http://gridstackjs.com for a demo or check out these examples.
Note: You can still use underscore.js (>= 1.7.0) instead of lodash.js
- jQuery UI (>= 1.12.0). Minimum required components: Core, Widget, Mouse, Draggable, Resizable
- (Optional) jquery-ui-touch-punch for touch-based devices support
- In the browser:
<link rel="stylesheet" href="gridstack.css" />
<script src="gridstack.js"></script>
<script src="gridstack.jQueryUI.js"></script>- Using CDN:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.min.css" />
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.min.js'></script>
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.jQueryUI.min.js'></script>- Using bower:
$ bower install gridstack- Using npm:
$ npm install gridstackYou can download files from dist directory as well.
<div class="grid-stack">
<div class="grid-stack-item"
data-gs-x="0" data-gs-y="0"
data-gs-width="4" data-gs-height="2">
<div class="grid-stack-item-content"></div>
</div>
<div class="grid-stack-item"
data-gs-x="4" data-gs-y="0"
data-gs-width="4" data-gs-height="4">
<div class="grid-stack-item-content"></div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('.grid-stack').gridstack();
});
</script>As of v0.3.0, gridstack introduces a new plugin system. The drag'n'drop functionality has been modified to take advantage of this system. Because of this, and to avoid dependency on core code from jQuery UI, the plugin was functionality was moved to a separate file.
To ensure gridstack continues to work, either include the additional gridstack.jQueryUI.js file into your HTML or use gridstack.all.js:
<script src="gridstack.js"></script>
<script src="gridstack.jQueryUI.js"></script>or
<script src="gridstack.all.js"></script>We're working on implementing support for other drag'n'drop libraries through the new plugin system.
Documentation can be found here.
Please use jQuery UI Touch Punch to make jQuery UI Draggable/Resizable working on touch-based devices.
<script src="lodash.min.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script src="gridstack.js"></script>Also alwaysShowResizeHandle option may be useful:
$(function () {
var options = {
alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
};
$('.grid-stack').gridstack(options);
});If you're still experiencing issues on touch devices please check #444
- AngularJS: gridstack-angular
- Rails: gridstack-js-rails
- ember: gridstack-ember
To change grid width (columns count), to addition to width option, CSS rules
for .grid-stack-item[data-gs-width="X"] and .grid-stack-item[data-gs-x="X"] have to be changed accordingly.
For instance for 3-column grid you need to rewrite CSS to be:
.grid-stack-item[data-gs-width="3"] { width: 100% }
.grid-stack-item[data-gs-width="2"] { width: 66.66666667% }
.grid-stack-item[data-gs-width="1"] { width: 33.33333333% }
.grid-stack-item[data-gs-x="2"] { left: 66.66666667% }
.grid-stack-item[data-gs-x="1"] { left: 33.33333333% }For 4-column grid it should be:
.grid-stack-item[data-gs-width="4"] { width: 100% }
.grid-stack-item[data-gs-width="3"] { width: 75% }
.grid-stack-item[data-gs-width="2"] { width: 50% }
.grid-stack-item[data-gs-width="1"] { width: 25% }
.grid-stack-item[data-gs-x="3"] { left: 75% }
.grid-stack-item[data-gs-x="2"] { left: 50% }
.grid-stack-item[data-gs-x="1"] { left: 25% }and so on.
Here is a SASS code snippet which can make life easier (Thanks to @ascendantofrain, #81 and @StefanM98, #868):
.grid-stack > .grid-stack-item {
$gridstack-columns: 12;
@for $i from 1 through $gridstack-columns {
&[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
&[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
&[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
&[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
}
}Or you can include gridstack-extra.css. See below for more details.
There are few extra CSS batteries in gridstack-extra.css (gridstack-extra.min.css).
You can use other than 12 grid width:
<div class="grid-stack grid-stack-N">...</div>$('.grid-stack').gridstack({width: N});See example: 2 grids demo
You can override default resizable/draggable options. For instance to enable other then bottom right resizing handle
you can init gridstack like:
$('.grid-stack').gridstack({
resizable: {
handles: 'e, se, s, sw, w'
}
});Note: It's not recommended to enable nw, n, ne resizing handles. Their behaviour may be unexpected.
Support of IE8 is quite limited and is not a goal at this time. As far as IE8 doesn't support DOM Level 2 I cannot manipulate with CSS stylesheet dynamically. As a workaround you can do the following:
- Create
gridstack-ie8.cssfor your configuration (sample for grid with cell height of 60px can be found here). - Include this CSS:
<!--[if lt IE 9]>
<link rel="stylesheet" href="gridstack-ie8.css"/>
<![endif]-->- You can use this python script to generate such kind of CSS:
#!/usr/bin/env python
height = 60
margin = 20
N = 100
print '.grid-stack > .grid-stack-item { min-height: %(height)spx }' % {'height': height}
for i in range(N):
h = height * (i + 1) + margin * i
print '.grid-stack > .grid-stack-item[data-gs-height="%(index)s"] { height: %(height)spx }' % {'index': i + 1, 'height': h}
for i in range(N):
h = height * (i + 1) + margin * i
print '.grid-stack > .grid-stack-item[data-gs-min-height="%(index)s"] { min-height: %(height)spx }' % {'index': i + 1, 'height': h}
for i in range(N):
h = height * (i + 1) + margin * i
print '.grid-stack > .grid-stack-item[data-gs-max-height="%(index)s"] { max-height: %(height)spx }' % {'index': i + 1, 'height': h}
for i in range(N):
h = height * i + margin * i
print '.grid-stack > .grid-stack-item[data-gs-y="%(index)s"] { top: %(height)spx }' % {'index': i , 'height': h}There are at least two more issues with gridstack in IE8 with jQueryUI resizable (it seems it doesn't work) and droppable. If you have any suggestions about support of IE8 you are welcome here: gridstack#76
If you're using require.js and a single file jQueryUI please check out this Stackoverflow question to get it working properly.
View our change log here.
gridstack.js is currently maintained by Pavel Reznikov and Dylan Weiss. We appreciate all contributors for help.