gridstack.js is a Responsive Drag and Drop Grid Layout with jQuery it’s a mobile-friendly modern typescript library for dashboard layout and creation. It helps to make a drag-and-drop, multi-column responsive dashboard easier that has never been so. Gridstack has many bindings and it works awesome with Knockout.js, React, Vue, Angular, Ember and others.
Basic Usage (jQuery Version):
- Include jQuery library and other required resources in the the document.
- jQuery
- jQuery UI
- jQuery UI Touch Punch: for touch support (OPTIONAL)
- gridstack.poly.js: for IE and older browsers (OPTIONAL)
<!-- Local -->
<link href="/path/to/gridstack.css" rel="stylesheet" />
<!-- Or From A CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@latest/dist/gridstack.min.css" />
Include the jQuery Gridstack.js plugin and other required resources at the end of the document.
<!-- Dependencies -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-ui.min.js"></script>
<script src="/path/to/cdn/jquery.ui.touch-punch.min.js"></script>
<!-- jQuery Gridstack.js -->
<script src="gridstack.all.js"></script>
<!-- Or from a CDN -->
<script src="https://cdn.jsdelivr.net/npm/gridstack@latest/dist/gridstack.all.js"></script>
<!-- Polyfill for old IE -->
<script src="gridstack.poly.js"></script>
Create a sample draggable grid layout as follows.
<div class="grid-stack" data-gs-width="12">
<div class="grid-stack-item" gs-x="0" data-gs-y="0" gs-width="4" gs-height="2">
<div class="grid-stack-item-content"></div>
</div>
<div class="grid-stack-item" gs-x="4" data-gs-y="0" gs-width="4" gs-height="4">
<div class="grid-stack-item-content"></div>
</div>
<div class="grid-stack-item" gs-x="8" gs-y="0" gs-width="2" gs-height="2" gs-min-width="2" gs-no-resize="yes">
<div class="grid-stack-item-content"> <span class="fa fa-hand-o-up"></span> Drag me! </div>
</div>
<div class="grid-stack-item" gs-x="10" gs-y="0" gs-width="2" gs-height="2">
<div class="grid-stack-item-content"></div>
</div>
<div class="grid-stack-item" gs-x="0" gs-y="4" gs-width="2" gs-height="2">
<div class="grid-stack-item-content"></div>
</div>
<div class="grid-stack-item" gs-x="2" gs-y="4" gs-width="2" gs-height="4">
<div class="grid-stack-item-content"></div>
</div>
<div class="grid-stack-item" gs-x="8" gs-y="4" gs-width="4" gs-height="2">
<div class="grid-stack-item-content"></div>
</div>
<div class="grid-stack-item" gs-x="0" gs-y="6" gs-width="2" gs-height="2">
<div class="grid-stack-item-content"></div>
</div>
<div class="grid-stack-item" gs-x="4" gs-y="6" gs-width="4" gs-height="2">
<div class="grid-stack-item-content"></div>
</div>
<div class="grid-stack-item" gs-x="8" gs-y="6" gs-width="2" gs-height="2">
<div class="grid-stack-item-content"></div>
</div>
<div class="grid-stack-item" gs-x="10" gs-y="6" gs-width="2" gs-height="2">
<div class="grid-stack-item-content"></div>
</div>
</div>
Call the plugin and create a responsive & fluid 12 columns grid layout.
$(function () {
$('.grid-stack').gridstack({
column: 12
});
});
All possible options available.
$('.grid-stack').gridstack({
// accept widgets dragged from other grids or from outside
// true (uses '.grid-stack-item' class filter) or false
// string for explicit class name
// function (i: number, element: Element): boolean
acceptWidgets: false,
// turns animation on
animate: false,
// amount of columns
column: 12,
// max/min number of rows
maxRow: 0,
minRow: 0
// maximum rows amount
height: 0,
// widget class
itemClass: 'grid-stack-item',
// class for placeholder
placeholderClass: 'grid-stack-placeholder',
// text for placeholder
placeholderText: '',
// draggable handle selector
handle: '.grid-stack-item-content',
// class for handle
handleClass: null,
// allow for selecting older behavior (adding STYLE element to HEAD element instead of parentNode)
styleInHead: false,
// one cell height
cellHeight: 60,
// gap size
// e.g. '5px 10px 0 20px' or '5em 10em'
margin: 10,
// unit
verticalMarginUnit: 'px',
cellHeightUnit: 'px',
// if false it tells to do not initialize existing items
auto: true,
// minimal width.
minWidth: 768,
// class set on grid when in one column mode
oneColumnModeClass: 'grid-stack-one-column-mode',
// set to true if you want oneColumnMode to use the DOM order and ignore x,y from normal multi column layouts during sorting. This enables you to have custom 1 column layout that differ from the rest.
oneColumnModeDomSort: false,
// enable floating widgets
float: false,
// makes grid static
staticGrid: false,
// if true the resizing handles are shown even the user is not hovering over the widget
alwaysShowResizeHandle: false,
// allows to owerride jQuery UI draggable options
draggable: {handle: '.grid-stack-item-content', scroll: true, appendTo: 'body', containment: null},
// let user drag nested grid items out of a parent or not
dragOut: false,
// allows to owerride jQuery UI resizable options
resizable: {autoHide: true, handles: 'se'},
// disallows dragging of widgets
disableDrag: false
// disallows resizing of widgets
disableResize: false,
// if `true` turns grid to RTL.
// Possible values are `true`, `false`, `'auto'`
rtl: 'auto',
// if `true` widgets could be removed by dragging outside of the grid
removable: false,
// time in milliseconds before widget is being removed while dragging outside of the grid
removeTimeout: 2000,
// CSS class when in one column mode
disableOneColumnMode: 'grid-stack-one-column-mode',
// class that implement drag'n'drop functionallity for gridstack
ddPlugin: null
});
API methods methods.
// Creates a new widget.
grid.addWidget(el, x, y, width, height, autoPosition, minWidth, maxWidth, minHeight, maxHeight, id);
// Initailizes batch updates.
// You will see no changes until commit method is called.
grid.batchUpdate();
// Relayout grid items to reclaim any empty space.
grid.compact();
// Gets current cell height.
grid.cellHeight();
// Update current cell height.
// grid.cell_height(grid.cell_width() * 1.2);
grid.cellHeight(val, noUpdate);
// Gets current cell width.
grid.cellWidth();
// Returns current vertical margin value.
grid.verticalMargin();
// value - new vertical margin value.
// noUpdate - if true, styles will not be updated.
grid.verticalMargin(value, noUpdate)
// Finishes batch updates. Updates DOM nodes. You must call it after batch_update.
grid.Commit();
// set/get floating widgets
grid.float(val);
// Disables / enables widgets moving/resizing.
grid.movable('.grid-stack-item', false);
grid.resizable('.grid-stack-item', true);
// Get the position of the cell under a pixel on screen.
// position - the position of the pixel to resolve in absolute coordinates, as an object with top and leftproperties
// useOffset - if true, value will be based on offset vs position (Optional. Default false). Useful when grid is within position: relative element
// Returns an object with properties x and y i.e. the column and row in the grid.
grid.getCellFromPixel(position, useOffset);
// Checks if specified area is empty.
grid.isAreaEmpty(x, y, width, height);
// Locks/unlocks widget.
// el - widget to modify.
// val - if true widget will be locked.
grid.locked(el, val);
// Make new widgets after new items are appended to the grid.
grid.makeWidget(el);
// Set the minWidth/maxWidth for a widget.
grid.minWidth(el, val);
grid.maxWidth(el, val);
// Set the minHeight/maxWidth for a widget.
grid.minHeight(el, val);
grid.maxHeight(el, val);
// Removes widget from the grid.
// detachNode - if false node won't be removed from the DOM
grid.removeWidget(el, detachNode);
// Removes all widgets from the grid.
// detachNode - if false node won't be removed from the DOM
grid.removeAll(detachNode);
// Changes widget size
grid.resize(el, width, height);
// Changes widget position
grid.move(el, x, y);
// Enables/Disables resizing.
grid.resizable(el, val);
// Enables/Disables moving.
grid.movable(el, val);
// Updates widget position/size.
grid.update(el, x, y, width, height);
// Returns true if the height of the grid will be less the vertical constraint. Always returns true if grid doesn't have height constraint.
grid.willItFit(x, y, width, height, autoPosition);
// Toggle the grid animation state.
// doAnimate - if true the grid will animate.
grid.setAnimation(doAnimate);
// Modify number of columns in the grid
// doNotPropagate - if true existing widgets will not be updated.
// NOTE: Use column() instead in v1.0+
grid.setColumn(column, doNotPropagate);
// Update widget position/size.
grid.setStatic(staticValue);
// Toggle the grid static state
// staticValue - if true the grid becomes static.
grid.update(el, x, y, width, height));
// Destroy the instance
// detachGrid - if false nodes and grid will not be removed from the DOM
grid.destroy([detachGrid]);
// Enables/disables the plugin
grid.enable();
grid.disable();
// Enables/disables widget moving. includeNewWidgets will force new widgets to be draggable as per doEnable's value by changing the disableDrag grid option.
grid.enableMove(doEnable, includeNewWidgets);
// Enables/disables widget resizing. includeNewWidgets will force new widgets to be resizable as per doEnable's value by changing the disableResize grid option.
grid.enableResize(doEnable, includeNewWidgets);
7. Event listeners available.
$('.grid-stack').on('added', function(event, items) {
// after new items are added
});
$('.grid-stack').on('change', function(event, items) {
// fired on change
});
$('.grid-stack').on('disable', function(event) {
// var grid = event.target;
});
$('.grid-stack').on('dragstart', function(event, ui) {
// var grid = this;
// var element = event.target;
});
$('.grid-stack').on('dragstop', function(event, ui) {
// var grid = this;
// var element = event.target;
});
$('.grid-stack').on('dropped', function(event, previousWidget, newWidget) {
// after dropped
});
$('.grid-stack').on('enable', function(event) {
// var grid = event.target;
});
$('.grid-stack').on('removed', function(event, items) {
// after removed
});
$('.grid-stack').on('resizestart', function(event, ui) {
// var grid = this;
// var element = event.target;
});
$('.grid-stack').on('gsresizestop', function(event, items) {
// on stop resizing
});
File Information
File Size | 367.42 KB |
Last Update | 12 Days Ago |
Date Published | 2 Years Ago |
License | MIT License |