Throughout Canva, users can drag and drop content from the side panel and into their designs. This is a big part of what makes Canva such a user-friendly design experience.
Apps can use the Drag and Drop capability to integrate this behavior into their app.
User experience
When a user drags content into a design, the content moves through three states:
- Idle
- Dragging
- Dropped
The idle state is when the content is sitting in the side panel, waiting for the user to interact with it. If the content is an image, it's typically rendered as a thumbnail.
The dragging state is when the content is being moved from the side panel, into the user's design. In this state, a semi-transparent preview of the content, known as the drag preview, is shown under the user's cursor.
Typically, the content in the side panel is made invisible while it's being dragged. This creates the effect of the content being moved from one location to another.
The dropped state is when the content is added to the user's design. If the content was made invisible in the side panel, it's made visible again.
Supported content types
When using the Drag and Drop capability, any type of content can be made draggable, but only some types of content can be made droppable, including:
For example, an app can make a div element draggable, but once the user starts dragging the element, the app must provide the data for a supported element type.
A more fundamental point is that the type of content being dragged at the start of a drag event is not necessarily the same as the type of content being dropped at the end of a drag event.
For example, an app could render an image in the side panel, and make it so that, at the end of that image's drag event, some text is added to the user's design. The reverse is also possible.
In most cases, the type of content being dragged should also be the same type of content that is being dropped, as that is a more familiar user experience, but this isn't enforced by the API.
Limitations
- Users can only drag and drop media on desktop devices. If an app supports mobile devices, it should ensure that media can be added to a design with a click or a tap.
- Only one piece of content can be dragged into a design at a time.