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");
  },
});

Parameters

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

Audio tracks
Images
Text
Videos

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>