- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque eius eligendi eos fuga magnam numquam perferendis provident quos rem. Asperiores assumenda dolor error eveniet impedit nihil numquam provident repellat ullam.
-
+
+
+
regular item
-
+
-
-
-
1
-
2
-
3
-
4
-
-
5
-
6
-
-
+ nested 1 - can drag items out
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+
+
+
+ nested 2 - constrained to parent (default)
+
+
7
+
8
-
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index 70dcb36fa..bad0f365b 100644
--- a/doc/CHANGES.md
+++ b/doc/CHANGES.md
@@ -27,16 +27,18 @@ Change log
## v0.5.5-dev (upcoming changes)
-- add `float(val)` to set/get the grid float mode [#1088](https://github.com/gridstack/gridstack.js/pull/1088)
-- add `compact()` relayout grid items to reclaim any empty space [#1101](https://github.com/gridstack/gridstack.js/pull/1101)
-- Allow percentage as a valid unit for height [#1093](https://github.com/gridstack/gridstack.js/pull/1093)
+- add `float(val)` to set/get the grid float mode, which will relayout [#1088](https://github.com/gridstack/gridstack.js/pull/1088)
+- add `compact()` to reclaim any empty space and relayout grid items [#1101](https://github.com/gridstack/gridstack.js/pull/1101)
+- add `options.dragOut` to let user drag nested grid items out of a parent or not (default false)
+and jQuery UI `draggable.containment` can now be specified in options. You can now drag&drop between 2 nested grids [#1105](https://github.com/gridstack/gridstack.js/pull/1105)
+- Allow percentage as a valid unit for height [#1093](https://github.com/gridstack/gridstack.js/pull/1093). thank you @trevisanweb @aureality @ZoolWay
- fixed callbacks to get either `added, removed, change` or combination if adding a node require also to change its (x,y) for example.
Also you can now call `batchUpdate()` before calling a bunch of `addWidget()` and get a single event callback (more efficient).
[#1096](https://github.com/gridstack/gridstack.js/pull/1096)
- `removeAll()` is now much faster (no relayout) and calls `removed` event just once with a list [#1097](https://github.com/gridstack/gridstack.js/pull/1097)
- `setColumn()` complete re-write and is no longer "Experimental". We now do a reasonable job at sizing/position the widgets (especially 1 column) and
also now cache each column layout so you can go back to say 12 column and not loose original layout. [#1098](https://github.com/gridstack/gridstack.js/pull/1098)
-- fix bug where `addWidget(el)` (default values) would not render item at correct CSS location, and overlap item at (0,0) [#1098](https://github.com/gridstack/gridstack.js/pull/1098)
+- fix bug where `addWidget(el)` (no data) would not render item at correct location, and overlap item at (0,0) [#1098](https://github.com/gridstack/gridstack.js/pull/1098)
## v0.5.5 (2019-11-27)
diff --git a/doc/README.md b/doc/README.md
index 9baf38f11..6e0737fa1 100644
--- a/doc/README.md
+++ b/doc/README.md
@@ -73,12 +73,13 @@ gridstack.js API
* a string (ex: '100px', '10em', '10rem', '10%')
* 0 or null, in which case the library will not generate styles for rows. Everything must be defined in CSS files.
* `'auto'` - height will be calculated to match cell width (initial square grid).
-- `column` - amount of columns (default: `12`)
+- `column` - number of columns (default: `12`) which can change on the fly with `setColumn()` as well. See [example](http://gridstackjs.com/demo/column.html)
- `ddPlugin` - class that implement drag'n'drop functionallity for gridstack. If `false` grid will be static. (default: `null` - first available plugin will be used)
- `disableDrag` - disallows dragging of widgets (default: `false`).
- `disableOneColumnMode` - disables the onColumnMode when the window width is less than minWidth (default: 'false')
- `disableResize` - disallows resizing of widgets (default: `false`).
-- `draggable` - allows to override jQuery UI draggable options. (default: `{handle: '.grid-stack-item-content', scroll: false, appendTo: 'body'}`)
+- `draggable` - allows to override jQuery UI draggable options. (default: `{handle: '.grid-stack-item-content', scroll: false, appendTo: 'body', containment: null}`)
+- `dragOut` to let user drag nested grid items out of a parent or not (default false) See [example](http://gridstackjs.com/demo/nested.html)
- `float` - enable floating widgets (default: `false`) See [example](http://gridstackjs.com/demo/float.html)
- `handle` - draggable handle selector (default: `'.grid-stack-item-content'`)
- `handleClass` - draggable handle class (e.g. `'grid-stack-item-content'`). If set `handle` is ignored (default: `null`)
diff --git a/src/gridstack.jQueryUI.js b/src/gridstack.jQueryUI.js
index 8019e10c1..38ff75573 100644
--- a/src/gridstack.jQueryUI.js
+++ b/src/gridstack.jQueryUI.js
@@ -56,11 +56,22 @@
el.draggable(opts);
} else {
el.draggable($.extend({}, this.grid.opts.draggable, {
- containment: this.grid.opts.isNested ? this.grid.container.parent() : null,
+ containment: (this.grid.opts.isNested && !this.grid.opts.dragOut) ?
+ this.grid.container.parent() :
+ (this.grid.opts.draggable.containment || null),
start: opts.start || function() {},
stop: opts.stop || function() {},
drag: opts.drag || function() {}
}));
+
+ var handles = el.data('gs-resize-handles') ? el.data('gs-resize-handles') : this.grid.opts.resizable.handles;
+ el.resizable($.extend({}, this.grid.opts.resizable, {
+ handles: handles
+ }, {
+ start: opts.start || function () { },
+ stop: opts.stop || function () { },
+ resize: opts.resize || function () { }
+ }));
}
return this;
};