ui.makeDraggable

API reference for the ui.makeDraggable method.

This version of the API is deprecated. This version will soon be unsupported. You should use a stable version of the API in your app.

The ui.makeDraggable method has been deprecated. You should instead handle drag and drop events with the ui.startDrag 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 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:

optionsobjectRequired

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

options.nodeHTMLElementRequired

The DOM node to make draggable.

options.onDragStartfunctionRequired

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

options.onDragEndfunctionRequired

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.dragDataobjectRequired

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

options.dragData.typestringRequired

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

options.dragData.titlestringRequired

A human-readable title that appears in the Canva editor.

options.dragData.durationMsnumberRequired

The duration of the audio file, in milliseconds.

options.dragData.resolveAudioReffunctionRequired

A function that returns the result of the upload method.

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

optionsobjectRequired

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

options.nodeHTMLElementRequired

The DOM node to make draggable.

options.onDragStartfunctionRequired

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

options.onDragEndfunctionRequired

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.dragDataobjectOptional

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

options.dragData.typestringRequired

The type of element to add to the design. For images, this must be "IMAGE".

options.dragData.resolveImageReffunctionRequired

A function that returns the result of the upload method.

options.dragData.previewSizeobjectRequired

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

options.dragData.previewSize.widthnumberRequired

The width of the drag preview, in pixels.

options.dragData.previewSize.heightnumberRequired

The height of the drag preview, in pixels.

options.dragData.fullSizeobjectOptional

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

options.dragData.fullSize.widthnumberRequired

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

options.dragData.fullSize.heightnumberRequired

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

options.dragData.previewSrcstringOptional

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

When adding text to a design, set the following properties:

optionsobjectRequired

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

options.nodeHTMLElementRequired

The DOM node to make draggable.

options.onDragStartfunctionRequired

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

options.onDragEndfunctionRequired

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.dragDataobjectRequired

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

options.dragData.typestringRequired

The type of element to add to the design. For text, this must be "TEXT".

options.dragData.childrenarrayRequired

The text to add to the user's design, provided as an array of strings.

For the time being, the array is only allowed to have one item. In the future, each element in the array will be rendered as a separate line of text.

options.dragData.textAlignstringOptional

The horizontal alignment of the text.

The available options include:

"start"
"center"
"end"

The default value is "start".

options.dragData.fontWeightstringOptional

The weight (boldness) of the font.

The available options include:

"normal"
"bold"

The default value is "normal".

options.dragData.fontStylestringOptional

The style of the font.

The available options include:

"normal"
"italic"

The default value is "normal".

options.dragData.decorationstringOptional

The decoration to apply to the font.

The available options include:

"normal"
"underline"

The default value is "normal".

When adding a video to a design, set the following properties:

optionsobjectRequired

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

options.nodeHTMLElementRequired

The DOM node to make draggable.

options.onDragStartfunctionRequired

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

options.onDragEndfunctionRequired

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.dragDataobjectRequired

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

options.dragData.typestringRequired

The type of element to add to the design. For videos, this must be "VIDEO".

options.dragData.resolveVideoReffunctionRequired

A function that returns the result of the upload method.

options.dragData.previewSizeobjectRequired

The dimensions of the drag preview, in pixels. The dimensions should have the same aspect ratio as the full-size video.

options.dragData.previewSize.widthnumberRequired

The width of the drag preview, in pixels.

options.dragData.previewSize.heightnumberRequired

The height of the drag preview, in pixels.

options.dragData.previewSrcstringRequired

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

options.dragData.fullSizeobjectOptional

The dimensions of the full-size video, in pixels. If omitted, the drag preview dimensions are used.

options.dragData.fullSize.widthnumber

Sometimes required

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

options.dragData.fullSize.heightnumber

Sometimes required

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

Returns

Promise<void>