Skip navigation

Skip to main content

On September 25th, 2024, we released v2 of the Apps SDK. To learn what’s new and how to upgrade, see Migration FAQ and Migration guide.
API reference
API reference

ui.startDragToPoint

API reference for the ui.startDragToPoint method.
This version of the API is a preview. Preview APIs are unstable and may change without warning. You can't release public apps using this API until it's stable.

Adds the specified element or content to fixed designs, which use a coordinate-based positioning system at the end of a drag event.

Parameters

eventDragStartEvent<E>Required

A drag start event.

currentTargetERequired
dragDataobjectRequired

Element or content to be added to the design at the end of the drag event.

Audio track to be added to the design at the end of a drag event.

typestringRequired

The type of element.

This must be "audio".

resolveAudioReffunctionRequired

A function that returns a reference (ref) to an audio asset in Canva's backend.

Returns

A Promise that resolves with the following object:

refAudioRef

A unique identifier that references an audio asset in Canva's backend.

durationMsnumberRequired

The duration of the audio track, in milliseconds.

titlestringRequired

A human readable title for the audio track.

Embed element to be added to the design at the end of a drag event.

typestringRequired

The type of element.

This must be "embed".

previewSizeDimensionsRequired

The dimensions of the preview image.

widthnumberRequired

A width, in pixels.

heightnumberRequired

A height, in pixels.

previewUrlstringRequired

The URL of an image to display under the user's cursor during the drag and drop event.

embedUrlstringRequired

The URL of media that can be embedded, such as the URL of a YouTube video.

This URL must be supported by the Iframely API.

Text element or content to be added to the design at the end of a drag event.

typestringRequired

The type of element.

This must be "text".

childrenstring[]Optional

The text content to drag.

textAlignstringOptional

The alignment of the text.

Default value: "start"

Available values:

  • "start"
  • "center"
  • "end"
  • "justify"
fontWeightFontWeightOptional

The weight (thickness) of the font.

Default value: "normal"

Available values:

  • "normal"
  • "thin"
  • "extralight"
  • "light"
  • "medium"
  • "semibold"
  • "bold"
  • "ultrabold"
  • "heavy"
fontStylestringOptional

The style of the font.

Default value: "normal"

Available values:

  • "normal"
  • "italic"
decorationstringOptional

The decoration of the font.

Default value: "none"

Available values:

  • "none"
  • "underline"
fontRefFontRefOptional

A unique identifier that points to a font asset in Canva's backend.

Video element or content to be added to the design at the end of a drag event.

typestringRequired

The type of element.

This must be "video".

resolveVideoReffunctionRequired

A function that returns a reference (ref) to a video asset in Canva's backend.

Returns

A Promise that resolves with the following object:

refVideoRef

A unique identifier that references a video asset in Canva's backend.

previewSizeDimensionsRequired

The dimensions of the preview image.

widthnumberRequired

A width, in pixels.

heightnumberRequired

A height, in pixels.

previewUrlstringRequired

The URL of an image to display under the user's cursor during the drag and drop event.

fullSizeDimensionsOptional

The dimensions of the full-size video.

  • These dimensions are used when adding the video to the design
  • If omitted, the previewSize dimensions are used as a fallback.
widthnumberRequired

A width, in pixels.

heightnumberRequired

A height, in pixels.

Image element or content to be added to the design at the end of a drag event.

typestringRequired

The type of element.

This must be "image".

previewSizeDimensionsRequired

The dimensions of the preview image.

widthnumberRequired

A width, in pixels.

heightnumberRequired

A height, in pixels.

resolveImageReffunctionRequired

A function that returns a reference (ref) to an audio asset in Canva's backend.

Returns

A Promise that resolves with the following object:

refImageRef

A unique identifier that references an image asset in Canva's backend.

previewUrlstringRequired

The URL of an image to display under the user's cursor during the drag and drop event.

fullSizeDimensionsOptional

The dimensions of the full-size image.

widthnumberRequired

A width, in pixels.

heightnumberRequired

A height, in pixels.

Returns

Promise<void>