如何在移动设备上将 draggable 设置为 false 以进行成帧运动或响应地更改拖动尺寸以适应不同的屏幕尺寸答案

【问题标题】：how to set draggable to false on mobile for framer motion OR change dimensions of dragging responsively for different screen sizes如何在移动设备上将 draggable 设置为 false 以进行成帧运动或响应地更改拖动尺寸以适应不同的屏幕尺寸
【发布时间】：2021-05-11 23:20:01
【问题描述】：

我的 React 应用程序中有一个可拖动组件，它只能在特定尺寸内拖动。但是，在移动设备上，这些尺寸超出了屏幕范围，用户可以将组件拖出屏幕并且永远无法将其拉回来。

我想知道是否有办法让移动设备上的组件不可拖动。更理想的是，我想知道是否有一种方法可以更改组件在不同屏幕尺寸下可拖动的尺寸。（反应能力）

谢谢。

【问题讨论】：

标签： javascript reactjs responsive draggable framer-motion

【解决方案1】：

您可以使用 Drag Constraints 设置他们可以拖动的限制

文档：https://www.framer.com/api/motion/gestures/#draggableprops.dragconstraints

然后根据屏幕大小动态改变它

将约束绑定到屏幕大小的像素值
或传递响应可拖动元素的dragConstraints 属性的包含div 的引用

 const constraintsRef = useRef(null);

 return (
   <MotionConstraints ref={constraintsRef}>
       <MotionBox drag dragConstraints={constraintsRef}>
         Drag Me
       </MotionBox>
     </MotionConstraints>
 )

#2 的工作示例：https://codesandbox.io/s/framer-motion-constraints-on-a-draggable-element-jqvu5?file=/src/App.tsx

【讨论】：