Canva Developers logo
Drag and Drop
Getting started
Drag and Drop

makeDraggable

API reference for the makeDraggable method.

Makes an HTML node draggable. When a node is draggable, the user can drag it over their design and, when they drop it, the app will insert a certain type of element.

In most cases, apps don't need to use this method directly. Instead, we recommend using one of the pre-built components in the starter kit, which are built on top of this method:

Usage

import { getDragAndDrop } from "@canva/dnd";


const dragAndDrop = getDragAndDrop();
const node = document.querySelector("#some-node");


dragAndDrop.makeDraggable({
  node,
  dragData: {
    type: "TEXT",
    children: ["Hello world"],
  },
  onDragStart: () => {
    console.log("The drag event has started");
  },
  onDragEnd: () => {
    console.log("The drag event has ended");
  },
});

Parameters

The expected parameters depend on the type of content that is to be added to the user's design at the end of a drag event:

  • Images
  • Text
  • Videos

When adding images to a design, the image data can come from a data URL or an external URL. This choice affects the parameters expected by the makeDraggable method.

  • Data URLs
  • External URLs

If the image data comes from a data URL, use the following properties:

options

Options for configuring the behavior of the makeDraggable method.

Type
object
options.node

The node to make draggable.

Type
HTMLElement
options.onDragStart

A callback function that runs at the start of a drag event.

A use-case of this function is to hide the draggable node at the start of a drag event. This creates the illusion of the node being moved, rather than copied, and is consistent with how draggable nodes work throughout the native Canva experience.

Type
function
options.onDragEnd

A callback function that runs at the end of a drag event. This function always runs at the end of a drag event, regardless of whether or not the user successfully drops something into their design.

Type
function
options.dragData

Options for configuring the element that's added to the user's design at the end of a drag event.

Type
object
options.dragData.type

The type of element to add to the user's design. To add an image, this must be "IMAGE".

Type
string
options.dragData.fullSizeSrc

The URL or data URL of the full-size image that will be added to the user's design at the end of the drag event.

Type
string
options.dragData.previewSize

The dimensions of the drag preview. The dimensions should have the same aspect ratio as the full-size image.

Type
object
options.dragData.previewSize.width

The width of the drag preview, in pixels.

Type
number
options.dragData.previewSize.height

The height of the drag preview, in pixels.

Type
number
options.dragData.fullSize

The dimensions of the full-size image. If omitted, the dimensions of the drag preview will be used.

Type
object
options.dragData.fullSize.width

The width of the full-size image, in pixels.

Type
number
options.dragData.fullSize.height

The height of the full-size image, in pixels.

Type
number
options.dragData.previewSrc

The URL or data URL of the image to use for the drag preview. This image will appear under the user's cursor as they during the drag event. If omitted, the full-size image will be used.

Type
string

Returns

This method doesn't return anything.