drag&drop between nested grids, set Containment

demo/nested.html

@@ -27,36 +27,44 @@
   <div class="container-fluid">
     <h1>Nested grids demo</h1>
 
-    <div class="grid-stack">
-      <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="3">
-        <div class="grid-stack-item-content">
-          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.
-        </div>
+    <div class="grid-stack top">
+      <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="1" data-gs-height="1">
+        <div class="grid-stack-item-content">regular item</div>
       </div>
-      <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4">
+      <div class="grid-stack-item" data-gs-x="1" data-gs-y="0" data-gs-width="4" data-gs-height="4">
         <div class="grid-stack-item-content">
-
-            <div class="grid-stack">
-              <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">1</div></div>
-              <div class="grid-stack-item" data-gs-x="3" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">2</div></div>
-              <div class="grid-stack-item" data-gs-x="6" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">3</div></div>
-              <div class="grid-stack-item" data-gs-x="9" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">4</div></div>
-
-              <div class="grid-stack-item" data-gs-x="0" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">5</div></div>
-              <div class="grid-stack-item" data-gs-x="3" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">6</div></div>
-            </div>
-
+          nested 1 - can drag items out
+          <div class="grid-stack nested1">
+            <div class="grid-stack-item sub" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">1</div></div>
+            <div class="grid-stack-item sub" data-gs-x="3" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">2</div></div>
+            <div class="grid-stack-item sub" data-gs-x="6" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">3</div></div>
+            <div class="grid-stack-item sub" data-gs-x="9" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">4</div></div>
+            <div class="grid-stack-item sub" data-gs-x="0" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">5</div></div>
+            <div class="grid-stack-item sub" data-gs-x="3" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">6</div></div>
+          </div>
+        </div>
+    </div>
+    <div class="grid-stack-item" data-gs-x="5" data-gs-y="0" data-gs-width="3" data-gs-height="4">
+      <div class="grid-stack-item-content">
+        nested 2 - constrained to parent (default)
+        <div class="grid-stack nested2">
+          <div class="grid-stack-item sub" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">7</div></div>
+          <div class="grid-stack-item sub" data-gs-x="0" data-gs-y="3" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">8</div></div>
         </div>
       </div>
     </div>
   </div>
 
-
   <script type="text/javascript">
     $(function () {
-      var options = {
+      var nestOptions = {
+        acceptWidgets: '.grid-stack-item.sub', // only pink sub items can be inserted, otherwise grid-items causes all sort of issues
+        dragOut: true // let us drag them out!
       };
-      $('.grid-stack').gridstack(options);
+      $('.grid-stack.top').gridstack();
+      $('.grid-stack.nested1').gridstack(nestOptions);
+      nestOptions.dragOut = false;
+      $('.grid-stack.nested2').gridstack(nestOptions);
     });
   </script>
 </body>

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)
 

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`)

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;
   };