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, and comes with a Typescript definition out of the box.
11
+
Mobile-friendly Javascript library (with Typescript bindings) for dashboard layout and creation. Making a drag-and-drop, multi-column responsive dashboard has never been easier. Allows you to build draggable, responsive bootstrap v4-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. Includes Typescript defines.
10
12
11
-
Inspired by no-longer maintained gridster.js, built with love.
13
+
Inspired by no-longer maintained gridster, built with love.
12
14
13
15
Please visit http://gridstackjs.com and [these demos](http://gridstackjs.com/demo/).
14
16
17
+
If you find this lib useful, please [donate](https://www.paypal.me/alaind831) and help support it!
grid.addWidget('<div class="grid-stack-item"><div class="grid-stack-item-content"> test </div></div>', {width:2});
96
+
</script>
89
97
```
90
98
91
-
## Basic usage
99
+
... or DOM created items
92
100
93
101
```html
94
102
<divclass="grid-stack">
@@ -101,27 +109,15 @@ $ yarn install gridstack
101
109
</div>
102
110
103
111
<scripttype="text/javascript">
104
-
$(function () {
105
-
$('.grid-stack').gridstack();
106
-
});
112
+
GridStack.init();
107
113
</script>
108
114
```
109
115
110
116
see [jsfiddle sample](https://jsfiddle.net/adumesny/jqhkry7g) as running example too.
111
117
112
118
## Requirements
113
119
114
-
*[jQuery](http://jquery.com) (>= 1.8)
115
-
*`Array.prototype.find`, and `Number.isNaN()` for IE and older browsers.
116
-
* Note: as of v0.5.4 We supply a separate `gridstack-poly.js` for that
117
-
(part of `gridstack.all.js`) or you can look at other pollyfills
118
-
([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
124
-
* (Optional) [jquery-ui-touch-punch](https://github.com/furf/jquery-ui-touch-punch) for touch-based devices support
120
+
Gridstack no longer requires external dependencies as of v1.0.0 (lodash was removed in v0.5.0 and jquery API in v1.0.0). All you need to include is `gridstack.all.js` and `gridstack.css` (layouts are done using CSS column based %).
125
121
126
122
## API Documentation
127
123
@@ -132,48 +128,18 @@ Documentation can be found [here](https://github.com/gridstack/gridstack.js/tree
132
128
133
129
You can easily extend or patch gridstack with code like this:
If you're still experiencing issues on touch devices please check [#444](https://github.com/gridstack/gridstack.js/issues/444)
175
-
176
-
177
143
## gridstack.js for specific frameworks
178
144
179
145
search for ['gridstack' under NPM](https://www.npmjs.com/search?q=gridstack&ranking=popularity) for latest, more to come...
@@ -190,7 +156,7 @@ GridStack makes it very easy if you need [1-12] columns out of the box (default
190
156
191
157
1) Change the `column` grid option when creating a grid to your number N
192
158
```js
193
-
$('.grid-stack').gridstack( {column:N} );
159
+
GridStack.init( {column:N} );
194
160
```
195
161
196
162
2) include `gridstack-extra.css` if **N < 12** (else custom CSS - see next). Without these, things will not render/work correctly.
@@ -260,32 +226,85 @@ and also have the `.grid-stack-N` prefix to support letting the user change colu
260
226
You can override default `resizable`/`draggable` options. For instance to enable other then bottom right resizing handle
261
227
you can init gridstack like:
262
228
263
-
```javascript
264
-
$('.grid-stack').gridstack({
229
+
```js
230
+
GridStack.init({
265
231
resizable: {
266
232
handles:'e, se, s, sw, w'
267
233
}
268
234
});
269
235
```
270
236
271
-
Note: It's not recommended to enable `nw`, `n`, `ne` resizing handles. Their behaviour may be unexpected.
272
-
273
-
## Migrating to v0.3.0
237
+
Note: It's not recommended to enable `nw`, `n`, `ne` resizing handles. Their behavior may be unexpected.
274
238
275
-
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.
239
+
## Touch devices support
276
240
277
-
To ensure gridstack continues to work, either include the additional `gridstack.jQueryUI.js` file into your HTML or use `gridstack.all.js`:
241
+
Please use [jQuery UI Touch Punch](https://github.com/furf/jquery-ui-touch-punch) to make jQuery UI Draggable/Resizable
If you're still experiencing issues on touch devices please check [#444](https://github.com/gridstack/gridstack.js/issues/444)
259
+
260
+
261
+
## Migrating to v1.0.0
262
+
263
+
v1.0.0 removed Jquery from the API and external dependencies, which will require some code changes. Here is a list of the changes:
264
+
265
+
1. your code only needs to include `gridstack.all.js` and `gristack.css` (don't include other) and is recommended you do that as internal dependencies will change. Right now jquery+jquery-ui (trimmed versions) are still being used internally for a short while.
266
+
267
+
2. code change:
268
+
269
+
**OLD** initializing code + adding a widget + adding an event:
270
+
```js
271
+
// initialization returned Jquery element, requiring second call to get GridStack var
272
+
$('.grid-stack').gridstack(opts?);
273
+
var grid =$('.grid-stack').data('grid-stack');
274
+
275
+
// returned Jquery element
276
+
grid.addWidget($('<div><div class="grid-stack-item-content"> test </div></div>'), {width:2});
277
+
278
+
// jquery event handler
279
+
$('.grid-stack').on('added', function(e, items) {/* items contains info */});
280
+
281
+
```
282
+
**NEW**
283
+
```js
284
+
// element identifier defaults to '.grid-stack', returns the grid
285
+
// for Typescript use window.GridStack.init()
286
+
var grid =GridStack.init(opts?, element?);
287
+
288
+
// returns DOM element
289
+
grid.addWidget('<div><div class="grid-stack-item-content"> test </div></div>', {width:2});
290
+
291
+
// event handler
292
+
grid.on('added', function(e, items) {/* items contains info */});
`grid.container` (jquery grid wrapper) -->`grid.el` (grid DOM element)
301
+
`grid.grid` (GridStackEngine) -->`grid.engine`
302
+
`grid.setColumn(N)`-->`grid.column(N)` and new`grid.column()` to get value, old API still supported though
303
+
```
304
+
305
+
Recommend looking at the [many samples](../demo) for more code examples.
306
+
307
+
We're working on implementing support for other drag'n'drop libraries through the plugin system. Right now it is still jquery-ui based (but minimal build content)
0 commit comments