Some Examples » 11. Drag: Constraints
11. Drag: Constraints
Add dragConstraints to limit how far you can drag a layer.
Code component
export default function CC_11_Drag_Constraints(props) {
return (
<div>
<motion.div
style={{
width: 150,
height: 150,
borderRadius: 30,
backgroundColor: "#fff",
cursor: "grab",
}}
drag
dragConstraints={{
top: -125,
right: 125,
bottom: 125,
left: -125,
}}
dragTransition={{ bounceStiffness: 600, bounceDamping: 20 }}
dragElastic={0.5}
whileTap={{ cursor: "grabbing" }}
/>
</div>
)
}
Code override
export function Drag_Constraints(Component): ComponentType {
return (props) => {
return (
<Component
{...props}
drag
dragConstraints={{
top: -125,
right: 125,
bottom: 125,
left: -125,
}}
dragTransition={{ bounceStiffness: 600, bounceDamping: 20 }}
dragElastic={0.5}
/>
)
}
}