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,
    }
}