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>
    )
}
React TSX

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}
            />
        )
    }
}
React TSX

Join the Mighty Guides mailing list    ( ± 6 emails/year )

GDPR

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing per their Privacy Policy and Terms.

Leave a Reply