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
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
25
22
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
26
23
**Table of Contents***generated with [DocToc](http://doctoc.herokuapp.com/)*
27
24
28
-
-[Demo and examples](#demo-and-examples)
25
+
-[Demo and API Documentation](#demo-and-api-documentation)
29
26
-[Usage](#usage)
30
27
-[Install](#install)
31
28
-[Include](#include)
32
29
-[Basic usage](#basic-usage)
33
30
-[Requirements](#requirements)
34
-
-[API Documentation](#api-documentation)
35
31
-[Extend Library](#extend-library)
36
32
-[Extend Engine](#extend-engine)
37
33
-[Change grid columns](#change-grid-columns)
@@ -46,17 +42,18 @@ Join us on Slack: https://gridstackjs.troolee.com
46
42
-[Migrating to v3](#migrating-to-v3)
47
43
-[Migrating to v4](#migrating-to-v4)
48
44
-[Migrating to v5](#migrating-to-v5)
45
+
-[Migrating to v6](#migrating-to-v6)
46
+
-[Migrating to v7](#migrating-to-v7)
49
47
-[jQuery Application](#jquery-application)
50
48
-[Changes](#changes)
51
49
-[The Team](#the-team)
52
50
53
51
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
54
52
55
53
56
-
# Demo and examples
57
-
58
-
Please visit http://gridstackjs.com and [these demos](http://gridstackjs.com/demo/)
54
+
# Demo and API Documentation
59
55
56
+
Please visit http://gridstackjs.com and [these demos](http://gridstackjs.com/demo/), and complete [API documentation](https://github.com/gridstack/gridstack.js/tree/master/doc)
60
57
61
58
# Usage
62
59
@@ -76,44 +73,21 @@ ES6 or Typescript
76
73
```js
77
74
import'gridstack/dist/gridstack.min.css';
78
75
import { GridStack } from'gridstack';
79
-
// THEN to get HTML5 drag&drop
80
-
import'gridstack/dist/h5/gridstack-dd-native';
81
-
// OR to get legacy jquery-ui drag&drop (support Mobile touch devices, h5 does not yet)
82
-
import'gridstack/dist/jq/gridstack-dd-jqueryui';
83
-
// OR nothing to get static grids (API driven, no user drag&drop)
84
-
```
85
-
86
-
**Note**: `jquery` & `jquery-ui` are imported by name, so you will have to specify their location in your webpack (or equivalent) config file,
87
-
which means you can possibly bring your own version
**Note**: the API is the same, regardless of the plugin (or lack thereof) so you can switch at any time. The Jquery version will export $ that it bundles and currently the only one to support mobile/touch devices through `jquery.ui.touch-punch` (h5 version is planned). Read more at [migrating to v3](#migrating-to-v3)
110
-
111
-
**Note2**: IE support was dropped in v2, but restored in v4.4 by an external contributor (I have no interest in testing+supporting obsolete browser so this might break in the future).
85
+
**Note**: IE support was dropped in v2, but restored in v4.4 by an external contributor (I have no interest in testing+supporting obsolete browser so this likely will break again in the future).
112
86
You can use the es5 files and polyfill (larger) for older browser instead. For example:
...or see list of all [API and options](https://github.com/gridstack/gridstack.js/tree/master/doc) available.
138
+
163
139
see [jsfiddle sample](https://jsfiddle.net/adumesny/jqhkry7g) as running example too.
164
140
165
141
## Requirements
166
142
167
-
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). v3.0.0 is a complete HTML5 re-write which removes all jquery dependency (still available for legacy apps). All you need to include now is `gridstack-h5.js` and `gridstack.min.css` (layouts are done using CSS column based %).
168
-
169
-
## API Documentation
170
-
171
-
Documentation can be found [here](https://github.com/gridstack/gridstack.js/tree/master/doc).
172
-
143
+
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). v3 is a complete HTML5 re-write removing need for jquery (still available for legacy apps). v6 is native mouse and touch event for mobile support, and no longer have jquery-ui version. All you need to include now is `gridstack-all.js` and `gridstack.min.css` (layouts are done using CSS column based %).
173
144
174
145
## Extend Library
175
146
@@ -217,14 +188,15 @@ GridStack makes it very easy if you need [1-12] columns out of the box (default
217
188
GridStack.init( {column:N} );
218
189
```
219
190
220
-
2) include `gridstack-extra.css` if **N < 12** (else custom CSS - see next). Without these, things will not render/work correctly.
191
+
2)also include `gridstack-extra.css` if **N < 12** (else custom CSS - see next). Without these, things will not render/work correctly.
Note: class `.grid-stack-N` will automatically be added and we include `gridstack-extra.css` which defines CSS for grids with custom [2-11] columns. Anything more and you'll need to generate the SASS/CSS yourself (see next).
199
+
Note: class `.grid-stack-N` will automatically be added and we include `gridstack-extra.min.css` which defines CSS for grids with custom [2-11] columns. Anything more and you'll need to generate the SASS/CSS yourself (see next).
228
200
229
201
See example: [2 grids demo](http://gridstack.github.io/gridstack.js/demo/two.html) with 6 columns
230
202
@@ -266,15 +238,15 @@ Better yet, here is a SASS code snippet which can make life much easier (Thanks
you can also use the SASS [src/gridstack-extra.scss](https://github.com/gridstack/gridstack.js/tree/master/src/gridstack-extra.scss) included in NPM package and modify to add more columns.
@@ -303,21 +275,19 @@ GridStack.init({
303
275
304
276
## Touch devices support
305
277
306
-
gridstack v3.2 jq version compiles touch support (html5 version does not yet support `touchmove` events. This will be added in a future release), so it works out of the box, no need for anything.
307
-
You **used** to need [jQuery UI Touch Punch](https://github.com/RWAP/jquery-ui-touch-punch) to make jQuery UI Draggable/Resizable
308
-
work on touch-based devices (now distributed as `dist/jq/jquery.ui.touch-punch.js` for reference).
278
+
gridstack v6+ now support mobile out of the box, with the addition of native touch event (along with mouse event) for drag&drop and resize.
279
+
Older versions (3.2+) required the jq version with added touch punch, but doesn't work well with nested grids.
alwaysShowResizeHandle:'mobile'// which defaults to /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
316
286
};
317
287
GridStack.init(options);
318
288
```
319
289
320
-
See [example](http://gridstack.github.io/gridstack.js/demo/mobile.html). If you're still experiencing issues on touch devices please check [#444](https://github.com/gridstack/gridstack.js/issues/444)
290
+
See [example](http://gridstack.github.io/gridstack.js/demo/mobile.html).
321
291
322
292
# gridstack.js for specific frameworks
323
293
@@ -465,9 +435,48 @@ make sure to read v4 migration first!
465
435
v5 does not have any breaking changes from v4, but a focus on nested grids in h5 mode:
466
436
You can now drag in/out of parent into nested child, with new API parameters values. See the release notes.
467
437
438
+
## Migrating to v6
439
+
440
+
the API did not really change from v5, but a complete re-write of Drag&Drop to use native `mouseevent` (instead of HTML draggable=true which is buggy on Mac Safari, and doesn't work on mobile devices) and `touchevent` (mobile), and we no longer have jquery ui option (wasn't working well for nested grids, didn't want to maintain legacy lib).
441
+
442
+
The main difference is you only need to include gridstack.js and get D&D (desktop and mobile) out of the box for the same size as h5 version.
443
+
444
+
## Migrating to v7
445
+
446
+
New addition, no API breakage per say. See release notes about creating sub-grids on the fly.
447
+
468
448
# jQuery Application
469
449
470
-
We now have a native HTML5 drag'n'drop through the plugin system (default), but the jquery-ui version can be used instead. It will bundle `jquery` (3.5.1) + `jquery-ui` (1.13.1 minimal drag|drop|resize) + `jquery-ui-touch-punch` (1.0.8 for mobile support) in `gridstack-jq.js`.
450
+
This is **old and no longer apply to v6+**. You'll need to use v5.1.1 and before
451
+
452
+
```js
453
+
import'gridstack/dist/gridstack.min.css';
454
+
import { GridStack } from'gridstack';
455
+
import'gridstack/dist/jq/gridstack-dd-jqueryui';
456
+
```
457
+
**Note**: `jquery` & `jquery-ui` are imported by name, so you will have to specify their location in your webpack (or equivalent) config file,
458
+
which means you can possibly bring your own version
We have a native HTML5 drag'n'drop through the plugin system (default), but the jquery-ui version can be used instead. It will bundle `jquery` (3.5.1) + `jquery-ui` (1.13.1 minimal drag|drop|resize) + `jquery-ui-touch-punch` (1.0.8 for mobile support) in `gridstack-jq.js`.
471
480
472
481
**NOTE: in v4, v3**: we ES6 module import jquery & jquery-ui by name, so you need to specify location of those .js files, which means you might be able to bring your own version as well. See the include instructions.
0 commit comments