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