Drag & Drop
You can make images, SVG, and component instances, and detached component layers draggable using the framer.makeDraggable()
API. The function requires an HTML element as its first argument, and a function to generate the drag data as its second argument.
Make sure to call the returned cleanup function when you are no longer rendering the element.
Supported drag types
The following data types can be inserted via dragging.
image
svg
componentInstance
detachedComponentLayers
Draggable
If you are building in React we offer a Draggable
component that makes this API simpler to work with. The component needs to be wrapped around the draggable element which can be any HTML element. It has a single data
property. You can also pass in a function to only generate the data when requested. Make sure to only render a single element as the child. And if you want to conditionally render the draggable you have to add the condition around the outer draggable component.
Inserting Components
You can insert components as either instances or detached layers. A component can only be inserted as detached layers when it has been created visually in Framer.