Skip navigation
Skip to main content
Canva Developers logo
API reference
API reference

ui.makeDraggable

API reference for the ui.makeDraggable method.

Makes a DOM node draggable. When the user drags and drops the node into their design, a specified type of element — for example, an image — will be added at the drop coordinates.

To learn more, see Supporting drag and drop.

Usage

import { ui } from "@canva/design";


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


if (!(node instanceof HTMLElement)) {
  throw new Error(`DOM node does not exist`);
}


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

Parameters

The expected parameters depend on what will be added to the user's design at the end of a drag event:

When adding an audio track to a design, set the following properties:

#optionsobject
Required

The options for configuring the drag and drop behavior of a DOM node.

#options.nodeHTMLElement
Required

The DOM node to make draggable.

#options.onDragStartfunction
Required

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

#options.onDragEndfunction
Required

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

#options.dragDataobject
Required

The options for configuring what's added to the user's design at the end of a drag event.

#options.dragData.typestring
Required

The type of element to add to the design. For audio tracks, this must be "AUDIO".

#options.dragData.titlestring
Required

A human readable title that appears in the Canva editor.

#options.dragData.durationMsnumber
Required

The duration of the audio file, in milliseconds.

#options.dragData.resolveAudioReffunction
Required

A function that returns the result of the upload method.

Returns

Promise<void>