> ## Documentation Index
> Fetch the complete documentation index at: https://www.canva.dev/docs/apps/llms.txt
> Use this file to discover all available pages before exploring further.

# ui.startDragToPoint

API reference for the ui.startDragToPoint method.

NOTE: **This 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

<Prop.List>
  <Prop name="event" required type="DragStartEvent<E>" sourceLineNumbers={[6627]}>
    A drag start event.

    <PillAccordion defaultExpanded={true} title={<>Properties of <strong>event</strong></>}>
      <Prop.List />
    </PillAccordion>
  </Prop>

  <Prop name="dragData" required type="object" sourceLineNumbers={[6627]}>
    Element or content to be added to the design at the end of the drag event.

    <Tabs>
      <Tab name="Audio">
        Audio track to be added to the design at the end of a drag event.

        <Prop.List>
          <Prop name="type" required type="string" sourceLineNumbers={[972]}>
            The type of element.

            The only valid value is `"audio"`.
          </Prop>

          <Prop name="resolveAudioRef" required type="function" sourceLineNumbers={[976]}>
            A function that returns a reference (ref) to an audio asset in Canva's backend.

            **Returns**

            A `Promise` that resolves with the following object:

            <Prop.List>
              <Prop name="ref" required type="AudioRef" sourceLineNumbers={[977]}>
                A unique identifier that references an audio asset in Canva's backend.
              </Prop>
            </Prop.List>
          </Prop>

          <Prop name="durationMs" required type="number" sourceLineNumbers={[982]}>
            The duration of the audio track, in milliseconds.
          </Prop>

          <Prop name="title" required type="string" sourceLineNumbers={[986]}>
            A human readable title for the audio track.
          </Prop>
        </Prop.List>
      </Tab>

      <Tab name="Embeds">
        Embed element to be added to the design at the end of a drag event.

        <Prop.List>
          <Prop name="type" required type="string" sourceLineNumbers={[3891]}>
            The type of element.

            The only valid value is `"embed"`.
          </Prop>

          <Prop name="previewSize" required type="Dimensions" sourceLineNumbers={[3895]}>
            The dimensions of the preview image.

            <PillAccordion defaultExpanded={false} title={<>Properties of <strong>previewSize</strong></>}>
              <Prop.List>
                <Prop name="width" required type="number" sourceLineNumbers={[3690]}>
                  A width, in pixels.
                </Prop>

                <Prop name="height" required type="number" sourceLineNumbers={[3694]}>
                  A height, in pixels.
                </Prop>
              </Prop.List>
            </PillAccordion>
          </Prop>

          <Prop name="previewUrl" required type="string" sourceLineNumbers={[3899]}>
            The URL of an image to display under the user's cursor during the drag and drop event.
          </Prop>

          <Prop name="embedUrl" required type="string" sourceLineNumbers={[3906]}>
            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.
          </Prop>
        </Prop.List>
      </Tab>

      <Tab name="Text">
        Text element or content to be added to the design at the end of a drag event.

        <Prop.List>
          <Prop name="type" required type="string" sourceLineNumbers={[6535]}>
            The type of element.

            The only valid value is `"text"`.
          </Prop>

          <Prop name="children" type="string[]" sourceLineNumbers={[6539]}>
            The text content to drag.
          </Prop>

          <Prop name="textAlign" type="string" sourceLineNumbers={[6544]}>
            The alignment of the text.

            <Prop.Extras>
              **Default value**: `"start"`
            </Prop.Extras>

            <Prop.Extras>
              **Available values**:

              * `"start"`
              * `"center"`
              * `"end"`
              * `"justify"`
            </Prop.Extras>
          </Prop>

          <Prop name="fontWeight" type="FontWeight" sourceLineNumbers={[6549]}>
            The weight (thickness) of the font.

            <Prop.Extras>
              **Default value**: `"normal"`
            </Prop.Extras>

            <Prop.Extras>
              **Available values**:

              * `"normal"`
              * `"thin"`
              * `"extralight"`
              * `"light"`
              * `"medium"`
              * `"semibold"`
              * `"bold"`
              * `"ultrabold"`
              * `"heavy"`
            </Prop.Extras>
          </Prop>

          <Prop name="fontStyle" type="string" sourceLineNumbers={[6554]}>
            The style of the font.

            <Prop.Extras>
              **Default value**: `"normal"`
            </Prop.Extras>

            <Prop.Extras>
              **Available values**:

              * `"normal"`
              * `"italic"`
            </Prop.Extras>
          </Prop>

          <Prop name="decoration" type="string" sourceLineNumbers={[6559]}>
            The decoration of the font.

            <Prop.Extras>
              **Default value**: `"none"`
            </Prop.Extras>

            <Prop.Extras>
              **Available values**:

              * `"none"`
              * `"underline"`
            </Prop.Extras>
          </Prop>

          <Prop name="fontRef" state="preview" type="FontRef" sourceLineNumbers={[6564]}>
            A unique identifier that points to a font asset in Canva's backend.
          </Prop>
        </Prop.List>
      </Tab>

      <Tab name="Videos">
        Video element or content to be added to the design at the end of a drag event.

        <Prop.List>
          <Prop name="type" required type="string" sourceLineNumbers={[6691]}>
            The type of element.

            The only valid value is `"video"`.
          </Prop>

          <Prop name="resolveVideoRef" required type="function" sourceLineNumbers={[6695]}>
            A function that returns a reference (ref) to a video asset in Canva's backend.

            **Returns**

            A `Promise` that resolves with the following object:

            <Prop.List>
              <Prop name="ref" required type="VideoRef" sourceLineNumbers={[6696]}>
                A unique identifier that references a video asset in Canva's backend.
              </Prop>
            </Prop.List>
          </Prop>

          <Prop name="previewSize" required type="Dimensions" sourceLineNumbers={[6701]}>
            The dimensions of the preview image.

            <PillAccordion defaultExpanded={false} title={<>Properties of <strong>previewSize</strong></>}>
              <Prop.List>
                <Prop name="width" required type="number" sourceLineNumbers={[3690]}>
                  A width, in pixels.
                </Prop>

                <Prop name="height" required type="number" sourceLineNumbers={[3694]}>
                  A height, in pixels.
                </Prop>
              </Prop.List>
            </PillAccordion>
          </Prop>

          <Prop name="previewUrl" required type="string" sourceLineNumbers={[6713]}>
            The URL of an image to display under the user's cursor during the drag and drop event.
          </Prop>

          <Prop name="fullSize" type="Dimensions" sourceLineNumbers={[6709]}>
            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.

            <PillAccordion defaultExpanded={false} title={<>Properties of <strong>fullSize</strong></>}>
              <Prop.List>
                <Prop name="width" required type="number" sourceLineNumbers={[3690]}>
                  A width, in pixels.
                </Prop>

                <Prop name="height" required type="number" sourceLineNumbers={[3694]}>
                  A height, in pixels.
                </Prop>
              </Prop.List>
            </PillAccordion>
          </Prop>
        </Prop.List>
      </Tab>

      <Tab name="Images">
        Image element or content to be added to the design at the end of a drag event.

        <Prop.List>
          <Prop name="type" required type="string" sourceLineNumbers={[1299]}>
            The type of element.

            The only valid value is `"image"`.
          </Prop>

          <Prop name="previewSize" required type="Dimensions" sourceLineNumbers={[1303]}>
            The dimensions of the preview image.

            <PillAccordion defaultExpanded={false} title={<>Properties of <strong>previewSize</strong></>}>
              <Prop.List>
                <Prop name="width" required type="number" sourceLineNumbers={[3690]}>
                  A width, in pixels.
                </Prop>

                <Prop name="height" required type="number" sourceLineNumbers={[3694]}>
                  A height, in pixels.
                </Prop>
              </Prop.List>
            </PillAccordion>
          </Prop>

          <Prop name="resolveImageRef" required type="function" sourceLineNumbers={[4085]}>
            A function that returns a reference (ref) to an audio asset in Canva's backend.

            **Returns**

            A `Promise` that resolves with the following object:

            <Prop.List>
              <Prop name="ref" required type="ImageRef" sourceLineNumbers={[4086]}>
                A unique identifier that references an image asset in Canva's backend.
              </Prop>
            </Prop.List>
          </Prop>

          <Prop name="previewUrl" required type="string" sourceLineNumbers={[4091]}>
            The URL of an image to display under the user's cursor during the drag and drop event.
          </Prop>

          <Prop name="fullSize" type="Dimensions" sourceLineNumbers={[4095]}>
            The dimensions of the full-size image.

            <PillAccordion defaultExpanded={false} title={<>Properties of <strong>fullSize</strong></>}>
              <Prop.List>
                <Prop name="width" required type="number" sourceLineNumbers={[3690]}>
                  A width, in pixels.
                </Prop>

                <Prop name="height" required type="number" sourceLineNumbers={[3694]}>
                  A height, in pixels.
                </Prop>
              </Prop.List>
            </PillAccordion>
          </Prop>
        </Prop.List>
      </Tab>
    </Tabs>
  </Prop>
</Prop.List>

## Returns

`Promise<void>`

## Permissions

To use this method, the `canva:design:content:write` permission must be enabled for the app. To learn more, see [Permissions](https://www.canva.dev/docs/apps/configuring-intents-permissions/).