You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Mobile-friendly Javascript library for dashboard layout and creation. Making a drag-and-drop, multi-column dashboard has never been easier. Allows you to build draggable, responsive bootstrap v3-friendly layouts. It also has multiple bindings and works great with [react](https://reactjs.org/), [angular](https://angular.io/), [knockout.js](http://knockoutjs.com), [ember](https://www.emberjs.com/) and others.
9
+
Mobile-friendly Javascript library for dashboard layout and creation. Making a drag-and-drop, multi-column dashboard has never been easier. Allows you to build draggable, responsive bootstrap v3-friendly layouts. It also has multiple bindings and works great with [React](https://reactjs.org/), [Angular](https://angular.io/), [Knockout.js](http://knockoutjs.com), [Ember](https://www.emberjs.com/) and others, and comes with a Typescript definition out of the box.
10
10
11
-
Inspired by no-longer maintained gridster.js. Built with love.
11
+
Inspired by no-longer maintained gridster.js, built with love.
12
12
13
-
Join gridstack.js on Slack: https://gridstackjs.troolee.com, and see demos section below
13
+
Please visit http://gridstackjs.com and [these demos](http://gridstackjs.com/demo/).
*`Array.prototype.find`, and `Number.isNaN()` for IE and older browsers.
52
-
* Note: as of v0.5.4 We supply a separate `gridstack-poly.js` for that
53
-
(part of `gridstack.all.js`) or you can look at other pollyfills
54
-
([core.js](https://github.com/zloirock/core-js#ecmascript-6-array) and [mozilla.org](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)).
* Note: as of v0.5.4 we include this subset as `jquery-ui.js` (and min.js) which is part of `gridstack.all.js`. If you wish to bring your own lib, include the individual gridstack parts instead of all.js
60
-
* (Optional) [jquery-ui-touch-punch](https://github.com/furf/jquery-ui-touch-punch) for touch-based devices support
You can also download source and build and use `dist` directory as well for latest non published code.
107
-
108
90
## Basic usage
109
91
110
92
```html
@@ -124,26 +106,21 @@ $(function () {
124
106
</script>
125
107
```
126
108
109
+
see [jsfiddle sample](https://jsfiddle.net/adumesny/jqhkry7g) as running example too.
127
110
128
-
## Migrating to v0.3.0
129
-
130
-
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 functionality was moved to a separate file.
131
-
132
-
To ensure gridstack continues to work, either include the additional `gridstack.jQueryUI.js` file into your HTML or use `gridstack.all.js`:
133
-
134
-
```html
135
-
<scriptsrc="gridstack.js"></script>
136
-
<scriptsrc="gridstack.jQueryUI.js"></script>
137
-
```
138
-
139
-
or
111
+
## Requirements
140
112
141
-
```html
142
-
<scriptsrc="gridstack.all.js"></script>
143
-
```
113
+
*[jQuery](http://jquery.com) (>= 1.8)
114
+
*`Array.prototype.find`, and `Number.isNaN()` for IE and older browsers.
115
+
* Note: as of v0.5.4 We supply a separate `gridstack-poly.js` for that
116
+
(part of `gridstack.all.js`) or you can look at other pollyfills
117
+
([core.js](https://github.com/zloirock/core-js#ecmascript-6-array) and [mozilla.org](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)).
144
118
145
-
We're working on implementing support for other drag'n'drop libraries through the new plugin system.
* Note: as of v0.5.4 we include this subset as `jquery-ui.js` (and min.js) which is part of `gridstack.all.js`. If you wish to bring your own lib, include the individual gridstack parts instead of all.js
123
+
* (Optional) [jquery-ui-touch-punch](https://github.com/furf/jquery-ui-touch-punch) for touch-based devices support
147
124
148
125
## API Documentation
149
126
@@ -180,10 +157,13 @@ If you're still experiencing issues on touch devices please check [#444](https:/
180
157
181
158
## gridstack.js for specific frameworks
182
159
160
+
search for ['gridstack' under NPM](https://www.npmjs.com/search?q=gridstack&ranking=popularity) for latest, more to come...
Note: It's not recommended to enable `nw`, `n`, `ne` resizing handles. Their behaviour may be unexpected.
273
253
254
+
## Migrating to v0.3.0
255
+
256
+
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 functionality was moved to a separate file.
257
+
258
+
To ensure gridstack continues to work, either include the additional `gridstack.jQueryUI.js` file into your HTML or use `gridstack.all.js`:
259
+
260
+
```html
261
+
<scriptsrc="gridstack.js"></script>
262
+
<scriptsrc="gridstack.jQueryUI.js"></script>
263
+
```
264
+
or
265
+
```html
266
+
<scriptsrc="gridstack.all.js"></script>
267
+
```
268
+
269
+
We're working on implementing support for other drag'n'drop libraries through the new plugin system.
0 commit comments