Overview

What is the Drag and Drop capability? Why use it?

Throughout Canva, users can drag content from the side panel and drop it into their designs. This makes it trivial to turn a blank page into a work of art.

You can use the Drag and Drop capability to add this behavior to an app.

User experience

When a user drags and drops 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. In this state, the content is typically rendered as a thumbnail.

The dragging state is when the content is being actively dragged from the side panel and into the user's design. In this state, a semi-transparent preview of the content is shown under the user's cursor. This preview is known as the drag preview.

Typically, the content's thumbnail is made invisible while it's being dragged. This creates the effect of it being moved from one location to another. This behavior is not part of the API itself though, and must be implemented within the app itself.

The dropped state is when the content is added to the user's design. At this point, the media is uploaded to the user's account and, if the thumbnail was hidden, it's made visible again.

Limitations

  • The Drag and Drop capability only works on desktop devices.
  • The Drag and Drop capability doesn't work in Firefox.
  • The Drag and Drop capability can only add PNG and JPEG images to a design.
  • Images must be provided as data URLs.
  • You can't control the absolute dimensions of the drag preview or the dropped image.
  • Only one piece of content can be dragged and dropped at a time.