define size of dragable elements from a sidebar

* you can now pre-define size of dragable elements from a sidebar using standard `data-gs-width` and `data-gs-height`
* updated two.html to show that

fix for #413 #914 #918 #922 (and others) and especially #933 which had the issue spelled out by @ermcgrat.

Sorry it took so longer to add this!

Author: Alain Dumesny

demo/two.html

@@ -62,7 +62,16 @@ <h1>Two grids demo</h1>
     <div class="row">
       <div class="col-md-3">
         <div class="sidebar">
-          <div class="grid-stack-item"><div class="grid-stack-item-content">Drag me</div></div>
+          
+          <!-- will size to fit content -->
+          <div class="grid-stack-item">
+            <div class="grid-stack-item-content">Drag me</div>
+          </div>
+          <!-- manually force a drop size of 2x1 -->
+          <div class="grid-stack-item" data-gs-width="2" data-gs-height="1">
+            <div class="grid-stack-item-content">Drag me 2x1</div>
+          </div>
+
         </div>
       </div>
       <div class="col-md-9">

doc/CHANGES.md

@@ -31,14 +31,20 @@ Change log
 - 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
+- Allow percentage as a valid unit for height [#1093](https://github.com/gridstack/gridstack.js/pull/1093). thank you 
+[@trevisanweb](https://github.com/trevisanweb) [@aureality](https://github.com/aureality)
+[@ZoolWay](https://github.com/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)` (no data) would not render item at correct location, and overlap item at (0,0) [#1098](https://github.com/gridstack/gridstack.js/pull/1098)
+- you can now pre-define size of dragable elements from a sidebar using standard `data-gs-width` and `data-gs-height` - fix 
+[#413](https://github.com/gridstack/gridstack.js/issues/413), [#914](https://github.com/gridstack/gridstack.js/issues/914), [#918](https://github.com/gridstack/gridstack.js/issues/918), 
+[#922](https://github.com/gridstack/gridstack.js/issues/922), [#933](https://github.com/gridstack/gridstack.js/issues/933) 
+thanks [@ermcgrat](https://github.com/ermcgrat) and others for pointing out code issue.
 
 ## v0.5.5 (2019-11-27)
 

src/gridstack.js

@@ -62,8 +62,10 @@
         width = Math.max.apply(Math, widths);
       }
 
-      dir = dir !== -1 ? 1 : -1;
-      return Utils.sortBy(nodes, function(n) { return dir * (n.x + n.y * width); });
+      if (dir === -1)
+        return Utils.sortBy(nodes, function(n) { return -(n.x + n.y * width); });
+      else
+        return Utils.sortBy(nodes, function(n) { return (n.x + n.y * width); });
     },
 
     createStylesheet: function(id) {
@@ -942,16 +944,25 @@
           }
         })
         .on(self.container, 'dropover', function(event, ui) {
-          var offset = self.container.offset();
           var el = $(ui.draggable);
-          var cellWidth = self.cellWidth();
-          var cellHeight = self.cellHeight();
+          var width, height;
+
+          // see if we already have a node with widget/height and check for attributes
           var origNode = el.data('_gridstack_node');
-          var verticalMargin = self.opts.verticalMargin;
+          if (!origNode || !origNode.width || !origNode.height) {
+            var w = parseInt(el.attr('data-gs-width'));
+            if (w > 0) { origNode = origNode || {}; origNode.width = w; }
+            var h = parseInt(el.attr('data-gs-height'));
+            if (h > 0) { origNode = origNode || {}; origNode.height = h; }
+          }
 
+          // if not calculate the grid size based on element outer size
           // height: Each row is cellHeight + verticalMargin, until last one which has no margin below
-          var width = origNode ? origNode.width : Math.ceil(el.outerWidth() / cellWidth);
-          var height = origNode ? origNode.height : Math.round((el.outerHeight() + verticalMargin) / (cellHeight + verticalMargin));
+          var cellWidth = self.cellWidth();
+          var cellHeight = self.cellHeight();
+          var verticalMargin = self.opts.verticalMargin;
+          width = origNode && origNode.width ? origNode.width : Math.ceil(el.outerWidth() / cellWidth);
+          height = origNode && origNode.height ? origNode.height : Math.round((el.outerHeight() + verticalMargin) / (cellHeight + verticalMargin));
 
           draggingElement = el;