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.

export function Example() {
    return (
        <motion.div
            style={{
                width: 150,
                height: 150,
                borderRadius: 30,
                backgroundColor: "#fff",
            }}
            drag
            dragDirectionLock
            dragConstraints={{ top: 0, right: 0, bottom: 0, left: 0 }}
            dragTransition={{ bounceStiffness: 600, bounceDamping: 20 }}
            dragElastic={0.5}
        />
    );
}