11. Drag: Locking
Limit dragging to one direction (at a time) by switching on dragDirectionLock
.
Code component
export function CC11DragLocking() {
return (
<Frame
// Visual & layout
size={150}
radius={30}
backgroundColor="#fff"
center
// Dragging
drag
dragDirectionLock
dragConstraints={{ top: 0, right: 0, bottom: 0, left: 0 }}
dragTransition={{ bounceStiffness: 600, bounceDamping: 20 }}
dragElastic={0.5}
/>
)
}
Framer Motion
export function FM11DragLocking() {
return (
<Center>
<motion.div
style={{
width: 150,
height: 150,
borderRadius: 30,
backgroundColor: "#fff",
cursor: "grab",
}}
drag
dragDirectionLock
dragConstraints={{ top: 0, right: 0, bottom: 0, left: 0 }}
dragTransition={{ bounceStiffness: 600, bounceDamping: 20 }}
dragElastic={0.5}
whileTap={{ cursor: "grabbing" }}
/>
</Center>
)
}
Override
export function Drag_Locking(): Override {
return {
drag: true,
dragDirectionLock: true,
dragConstraints: { top: 0, right: 0, bottom: 0, left: 0 },
dragTransition: { bounceStiffness: 600, bounceDamping: 20 },
dragElastic: 0.5,
}
}