corrected grid snapping, solves #232

notes:
-was already snapping to grid but didn't look like it because toolbox
border was shifting everything by 3px
-drag function wasn't updating the position, this.rnd.updatePosition
doesn't work inside onDrag
-snapping while dragging is done by dragGrid property

src/styles/app.css

@@ -305,7 +305,7 @@ body {
 }
 
 .toolbox-dropzone-editing {
-  border: 3px dashed #e1e1e1;
+  outline: 3px dashed #e1e1e1;
 }
 
 .toolbox-dropzone-active {

src/widget/editable-widget-container.js

@@ -31,7 +31,6 @@ class EditableWidgetContainer extends React.Component {
     if (this.props.grid === 1) {
       return value;
     }
-
     return Math.round(value / this.props.grid) * this.props.grid;
   }
 
@@ -41,28 +40,22 @@ class EditableWidgetContainer extends React.Component {
     }
   };
 
-  drag = (event, data) => {
-    const x = this.snapToGrid(data.x);
-    const y = this.snapToGrid(data.y);
-
-    if (x !== data.x || y !== data.y) {
-      this.rnd.updatePosition({ x, y });
-    }
-  };
-
   dragStop = (event, data) => {
     const widget = this.props.widget;
-
     widget.x = this.snapToGrid(data.x);
     widget.y = this.snapToGrid(data.y);
 
+
+    if (widget.x !== data.x || widget.y !== data.y) {
+      this.rnd.updatePosition({ x: widget.x, y: widget.y});
+    }
+
     if (this.props.onWidgetChange != null) {
       this.props.onWidgetChange(widget, this.props.index);
     }
   };
 
   resizeStop = (event, direction, ref,delta, position) => {
-
     const widget = this.props.widget;
 
     // resize depends on direction
@@ -119,7 +112,6 @@ class EditableWidgetContainer extends React.Component {
       className={widgetClasses}
       onResizeStart={this.borderWasClicked}
       onResizeStop={this.resizeStop}
-      onDrag={this.drag}
       onDragStop={this.dragStop}
       dragGrid={gridArray}
       resizeGrid={gridArray}