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

# dragAndDrop

> Drag from one element or position to another.

Specify exactly one `from*` target and one `to*` target. Use the description
form (`from`, `to`) for stable elements, or coordinates (`fromCoords`,
`toCoords`) for free-form drags such as Retool canvases.

## Parameters

| Parameter    | Type                 | Required | Description                                                                          |
| ------------ | -------------------- | -------- | ------------------------------------------------------------------------------------ |
| `from`       | `string`             | No       | Description of the start element.                                                    |
| `to`         | `string`             | No       | Description of the drop element.                                                     |
| `fromCss`    | `string`             | No       | CSS selector for the start element.                                                  |
| `toCss`      | `string`             | No       | CSS selector for the drop element.                                                   |
| `fromCoords` | `string \| { x, y }` | No       | Absolute coordinates for the start point. Either `x, y` string or `{ x, y }` object. |
| `toCoords`   | `string \| { x, y }` | No       | Absolute coordinates for the drop point. Either `x, y` string or `{ x, y }` object.  |
| `fromX`      | `number \| string`   | No       | X coordinate of the start point. Use with `fromY`.                                   |
| `fromY`      | `number \| string`   | No       | Y coordinate of the start point. Use with `fromX`.                                   |
| `toX`        | `number \| string`   | No       | X coordinate of the drop point. Use with `toY`.                                      |
| `toY`        | `number \| string`   | No       | Y coordinate of the drop point. Use with `toX`.                                      |
| `steps`      | `number`             | No       | Number of mouse-move steps between start and drop.                                   |
| `hover`      | `number`             | No       | Milliseconds to hover before releasing.                                              |
| `force`      | `boolean`            | No       | Force the drag even when elements appear non-actionable.                             |
| `iframe`     | `string`             | No       | URL or URL pattern of the iframe that contains the target element.                   |
| `saveAs`     | `string`             | No       | Name of the variable to write this step's return value to.                           |
| `retries`    | `number`             | No       | Number of times to retry the step on failure before failing the test.                |
| `skipped`    | `boolean`            | No       | Skip this step at execution time.                                                    |

## Examples

```yaml theme={null}
- dragAndDrop:
    from: the button component image on the left pane
    to: the main canvas
```

```yaml theme={null}
- dragAndDrop:
    fromCoords: 120, 240
    toCoords: 540, 380
    steps: 10
```

```yaml theme={null}
- dragAndDrop:
    fromCss: '[data-handle="resize"]'
    toX: 400
    toY: 280
```

## Related

* [Finding elements](/core-concepts/finding-elements)
* [Test format](/core-concepts/test-format)