[BUGFIX] offset problems for dragging and scaling with a lot of columns

When using a a lot of columns, e.g. more than 40
then the dashed box showing the next placement would
behave strangely compared to the box I am currently
dragging. This behavior increases while dragging
the box to the right side.

When scaling a box on the right side, the box would
jump one column to the left, which would then move around
all the boxes that I have already placed.

This behavior seems to be related to a rounding problem.

Author: Florian Heinze

dist/gridstack.js

@@ -635,7 +635,7 @@
             var o = $(this);
             self.grid.clean_nodes();
             self.grid.begin_update(node);
-            cell_width = Math.ceil(o.outerWidth() / o.attr('data-gs-width'));
+            cell_width = o.outerWidth() / o.attr('data-gs-width');
             cell_height = self.opts.cell_height + self.opts.vertical_margin;
             self.placeholder
                 .attr('data-gs-x', o.attr('data-gs-x'))
@@ -645,7 +645,7 @@
                 .show();
             node.el = self.placeholder;
 
-            el.resizable('option', 'minWidth', cell_width * (node.min_width || 1));
+            el.resizable('option', 'minWidth', Math.round(cell_width * (node.min_width || 1)));
             el.resizable('option', 'minHeight', self.opts.cell_height * (node.min_height || 1));
         };
 

src/gridstack.js

@@ -640,7 +640,7 @@
             var o = $(this);
             self.grid.clean_nodes();
             self.grid.begin_update(node);
-            cell_width = Math.ceil(o.outerWidth() / o.attr('data-gs-width'));
+            cell_width = o.outerWidth() / o.attr('data-gs-width');
             cell_height = self.opts.cell_height + self.opts.vertical_margin;
             self.placeholder
                 .attr('data-gs-x', o.attr('data-gs-x'))
@@ -650,7 +650,7 @@
                 .show();
             node.el = self.placeholder;
 
-            el.resizable('option', 'minWidth', cell_width * (node.min_width || 1));
+            el.resizable('option', 'minWidth', Math.round(cell_width * (node.min_width || 1)));
             el.resizable('option', 'minHeight', self.opts.cell_height * (node.min_height || 1));
         };