Some Examples » 12. Drag: Direction locking
12. Drag: Direction locking
Limit dragging to one direction (at a time) by switching on dragDirectionLock. Because of the dragConstraints, this box will also jump back to its initial position.
Code component
export default function CC_12_Drag_Direction_locking(props) {
return (
<div>
<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" }}
/>
</div>
)
}Code override
export function Drag_Direction_locking(Component): ComponentType {
return (props) => {
return (
<Component
{...props}
drag
dragDirectionLock
dragConstraints={{ top: 0, right: 0, bottom: 0, left: 0 }}
dragTransition={{ bounceStiffness: 600, bounceDamping: 20 }}
dragElastic={0.5}
/>
)
}
}