fix(bounds): Pass bounded x/y in Draggable callbacks

Backport #226
react-grid-layout · Aug 21, 2017 · 55f701e · 55f701e
1 parent e405109
commit 55f701e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/lib/Draggable.js b/lib/Draggable.js
@@ -261,8 +261,8 @@ export default class Draggable extends React.Component<DraggableProps, Draggable
       newState.slackY = this.state.slackY + (y - newState.y);
 
       // Update the event we fire to reflect what really happened after bounds took effect.
-      uiData.x = x;
-      uiData.y = y;
+      uiData.x = newState.x;
+      uiData.y = newState.y;
       uiData.deltaX = newState.x - this.state.x;
       uiData.deltaY = newState.y - this.state.y;
     }

diff --git a/specs/draggable.spec.jsx b/specs/draggable.spec.jsx
@@ -615,6 +615,24 @@ describe('react-draggable', function () {
       simulateMovementFromTo(drag, 0, 0, 100, 100);
     });
 
+    it('should call back on drag, with values within the defined bounds', function(){
+      function onDrag(event, data) {
+        assert(data.x === 90);
+        assert(data.y === 90);
+        assert(data.deltaX === 90);
+        assert(data.deltaY === 90);
+      }
+      drag = TestUtils.renderIntoDocument(
+        <Draggable onDrag={onDrag} bounds={{left: 0, right: 90, top: 0, bottom: 90}}>
+          <div />
+        </Draggable>
+      );
+
+      // (element, fromX, fromY, toX, toY)
+      simulateMovementFromTo(drag, 0, 0, 100, 100);
+
+    });
+
     it('should call back with offset left/top, not client', function () {
       function onDrag(event, data) {
         assert(data.x === 100);