Fixing drag (#3074)

motiondivision · Feb 20, 2025 · e55de5f · e55de5f
1 parent 495f627
commit e55de5f
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/Makefile b/Makefile
@@ -95,7 +95,7 @@ test-e2e: test-nextjs test-html test-react test-react-19
 	yarn test-playwright
 
 test-single: build test-mkdir
-	yarn start-server-and-test "yarn dev-server" http://localhost:9990 "cd packages/framer-motion && cypress run --headless --spec cypress/integration/layout-shared.ts"
+	yarn start-server-and-test "yarn dev-server" http://localhost:9990 "cd packages/framer-motion && cypress run --headless --spec cypress/integration/drag.ts"
 
 
 lint: bootstrap

diff --git a/dev/react/src/tests/drag.tsx b/dev/react/src/tests/drag.tsx
@@ -21,6 +21,7 @@ export const App = () => {
     const left = parseFloat(params.get("left")) || undefined
     const right = parseFloat(params.get("right")) || undefined
     const bottom = parseFloat(params.get("bottom")) || undefined
+    const showChild = Boolean(params.get("showChild"))
     const snapToOrigin = Boolean(params.get("return"))
     const x = getValueParam(params, "x", isPercentage)
     const y = getValueParam(params, "y", isPercentage)
@@ -50,7 +51,14 @@ export const App = () => {
                     x,
                     y,
                 }}
-            />
+            >
+                {showChild ? (
+                    <div
+                        data-testid="draggable-child"
+                        style={{ width: 50, height: 50, background: "blue" }}
+                    />
+                ) : null}
+            </motion.div>
         </div>
     )
 }
diff --git a/packages/framer-motion/cypress/integration/drag.ts b/packages/framer-motion/cypress/integration/drag.ts
@@ -27,6 +27,25 @@ describe("Drag", () => {
             })
     })
 
+    it("Drags the element by the defined distance", () => {
+        cy.visit("?test=drag&showChild=true")
+            .get("[data-testid='draggable-child']")
+            .wait(200)
+            .trigger("pointerdown", 5, 5)
+            .trigger("pointermove", 10, 10) // Gesture will start from first move past threshold
+            .wait(50)
+            .trigger("pointermove", 200, 300, { force: true })
+            .wait(50)
+            .trigger("pointerup", { force: true })
+            .should(($draggable: any) => {
+                const draggable = $draggable[0] as HTMLDivElement
+                const { left, top } = draggable.getBoundingClientRect()
+
+                expect(left).to.equal(200)
+                expect(top).to.equal(300)
+            })
+    })
+
     it("Drags the element by the defined distance with different initial offset", () => {
         cy.visit("?test=drag&x=100&y=100")
             .get("[data-testid='draggable']")

diff --git a/packages/framer-motion/src/gestures/pan/PanSession.ts b/packages/framer-motion/src/gestures/pan/PanSession.ts
@@ -228,12 +228,12 @@ export class PanSession {
 
     private handlePointerMove = (event: PointerEvent, info: EventInfo) => {
         if (
-            event.currentTarget instanceof Element &&
-            event.currentTarget.hasPointerCapture &&
+            event.target instanceof Element &&
+            event.target.hasPointerCapture &&
             event.pointerId !== undefined
         ) {
             try {
-                if (!event.currentTarget.hasPointerCapture(event.pointerId)) {
+                if (!event.target.hasPointerCapture(event.pointerId)) {
                     return
                 }
             } catch (e) {}