9. Drag

Just set drag to true (or "x", or "y") to make a frame draggable.

Code component

There’s a shorthand version for components: Instead of writing drag={true}, you can just write drag.

export function CC09Drag() {
    return (
        <Frame
            // Visual & layout
            size={150}
            radius={30}
            backgroundColor="#fff"
            center
            // Dragging
            drag
        />
    )
}

Framer Motion

export function FM09Drag() {
    return (
        <Center>
            <motion.div
                style={{
                    width: 150,
                    height: 150,
                    borderRadius: 30,
                    backgroundColor: "#fff",
                    cursor: "grab",
                }}
                drag
                whileTap={{ cursor: "grabbing" }}
            />
        </Center>
    )
}

Override

export function Drag(): Override {
    return {
        drag: true,
    }
}