#477

lib/Draggable.js

@@ -179,14 +179,14 @@ class Draggable extends React.Component<DraggableProps, DraggableState> {
     // Set x/y if a new position is provided in props that is different than the previous.
     if (
       position &&
-      (!prevPropsPosition || 
+      (!prevPropsPosition ||
         position.x !== prevPropsPosition.x || position.y !== prevPropsPosition.y
       )
     ) {
       log('Draggable: getDerivedStateFromProps %j', {position, prevPropsPosition});
       return {
-        x: position.x, 
-        y: position.y, 
+        x: position.x,
+        y: position.y,
         prevPropsPosition: {...position}
       };
     }
@@ -373,7 +373,7 @@ class Draggable extends React.Component<DraggableProps, DraggableState> {
     // Reuse the child provided
     // This makes it flexible to use whatever element is wanted (div, ul, etc)
     return (
-      <DraggableCore {...draggableCoreProps} onStart={this.onDragStart} onDrag={this.onDrag} onStop={this.onDragStop}>
+      <DraggableCore {...draggableCoreProps} scale={scale} onStart={this.onDragStart} onDrag={this.onDrag} onStop={this.onDragStop}>
         {React.cloneElement(React.Children.only(children), {
           className: className,
           style: {...children.props.style, ...style},

lib/DraggableCore.js

@@ -110,7 +110,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
      * `grid` specifies the x and y that dragging should snap to.
      */
     grid: PropTypes.arrayOf(PropTypes.number),
-    
+
     /**
      * `handle` specifies a selector to be used as the handle that initiates drag.
      *
@@ -320,7 +320,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
 
     // Snap to grid if prop has been provided
     if (Array.isArray(this.props.grid)) {
-      let deltaX = x - this.state.lastX, deltaY = y - this.state.lastY;
+      let deltaX = (x - this.state.lastX) * this.props.scale, deltaY = (y - this.state.lastY) * this.props.scale;
       [deltaX, deltaY] = snapToGrid(this.props.grid, deltaX, deltaY);
       if (!deltaX && !deltaY) return; // skip useless drag
       x = this.state.lastX + deltaX, y = this.state.lastY + deltaY;
@@ -358,8 +358,8 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
 
     const position = getControlPosition(e, this.state.touchIdentifier, this);
     if (position == null) return;
-    const {x, y} = position;
-    const coreEvent = createCoreData(this, x, y);
+    const {lastX, lastY} = this.state;
+    const coreEvent = createCoreData(this, lastX, lastY);
 
     // Call event handler
     const shouldContinue = this.props.onStop(e, coreEvent);
@@ -424,7 +424,7 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
       onMouseDown: this.onMouseDown,
       onMouseUp: this.onMouseUp,
       // onTouchStart is added on `componentDidMount` so they can be added with
-      // {passive: false}, which allows it to cancel. See 
+      // {passive: false}, which allows it to cancel. See
       // https://developers.google.com/web/updates/2017/01/scrolling-intervention
       onTouchEnd: this.onTouchEnd
     });

lib/utils/positionFns.js

@@ -103,13 +103,12 @@ export function createCoreData(draggable: DraggableCore, x: number, y: number):
 
 // Create an data exposed by <Draggable>'s events
 export function createDraggableData(draggable: Draggable, coreData: DraggableData): DraggableData {
-  const scale = draggable.props.scale;
   return {
     node: coreData.node,
-    x: draggable.state.x + (coreData.deltaX / scale),
-    y: draggable.state.y + (coreData.deltaY / scale),
-    deltaX: (coreData.deltaX / scale),
-    deltaY: (coreData.deltaY / scale),
+    x: draggable.state.x + coreData.deltaX,
+    y: draggable.state.y + coreData.deltaY,
+    deltaX: coreData.deltaX,
+    deltaY: coreData.deltaY,
     lastX: draggable.state.x,
     lastY: draggable.state.y
   };