时间戳

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

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

问题描述

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

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

谢谢你。

标签： javascriptreactjsresponsivedraggableframer-motion

解决方案

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

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

然后根据屏幕尺寸动态改变它

  1. 将约束绑定到屏幕大小的像素值
  2. 或者传递响应于可拖动元素的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

推荐阅读