# Row dragging

Managed row dragging applies user-defined order to Grid data. Manual reordering can conflict with display order determined by sorting.

Canonical: https://grid.syidax.com/docs/features/row-drag/

<a id="understand"></a>

## How it works and when to use it

Before dragging, check allowed data models and group/pivot states. Moving to another Grid additionally requires drop-target registration and transfer-result handling.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

- [Installation and integration · Shared sample data](https://grid.syidax.com/docs/guides/getting-started.md)

<a id="example-1"></a>

## Example 1. Provide a drag handle

Allow users to grab rows from the product column.

```javascript
grid.rowDragManaged = true;
grid.columnDefs = grid.columnDefs.map(col => ({ ...col, rowDrag: col.field === 'product' }));
await grid.setSortModel([]);
await grid.setFilterModel(null);
```

Verify the result: Test manual ordering in an unsorted, unfiltered list. Header-moving handles and row-moving handles are different.

<a id="example-2"></a>

## Example 2. Connect move results to saving

Handle rowMoved in your app to persist the updated order on the server.

```javascript
grid.addEventListener('rowMoved', event => console.log(event.detail));
console.log(await grid.getDragSafetyReport());
```

Verify the result: Check eligibility before a move and the result afterward. A successful visual move is not automatically saved to the server.

<a id="example-3"></a>

## Example 3. Distribute orders between two tables

To move orders from an unassigned table to an assignee's table, register the target drop area and inspect the rowsTransferred report.

```javascript
console.log(await grid.getDropZones());
grid.addEventListener('rowsTransferred', event => console.log(event.detail));
```

Verify the result: Your app decides whether to allow copying or moving. Also verify behavior when both tables already contain the same ID.

<a id="pitfalls"></a>

## Combining features and troubleshooting

Do not interpret dragging a filtered subset as reordering the entire source data set. Read getDragSafetyReport and rowDragCancel reasons to understand rejection.

Changing a parent in a hierarchy has more constraints than reordering a flat list. Inspect treeReparented and reparentRows results and avoid cycles.

<a id="related-api"></a>

## APIs used by this feature

- [rowDragManaged](https://grid.syidax.com/docs/options/rowDragManaged.md) — Lets the Grid manage reordering from row dragging. Review restrictions with sorting, filtering, and other row models.
- [rowDragMultiRow](https://grid.syidax.com/docs/options/rowDragMultiRow.md) — Allows dragging multiple selected rows together. Also configure rowDrag on a column and row selection.
- [rowDragText](https://grid.syidax.com/docs/options/rowDragText.md) — Builds drag feedback text from the row count and default label.
- [rowDrag](https://grid.syidax.com/docs/columns/rowDrag.md) — Provides a row drag handle in this column. Use with the Grid's drag policy.
- [startRowDrag](https://grid.syidax.com/docs/methods/startRowDrag.md) — Starts a row drag session through the public input contract. Check whether it started and any rejection reason.
- [getRowDragSession](https://grid.syidax.com/docs/methods/getRowDragSession.md) — Reads current row drag session progress.
- [registerDropZone](https://grid.syidax.com/docs/methods/registerDropZone.md) — Registers a drop area for receiving rows and returns the registration result.
- [unregisterDropZone](https://grid.syidax.com/docs/methods/unregisterDropZone.md) — Unregisters a drop area and returns success.
- [getDropZones](https://grid.syidax.com/docs/methods/getDropZones.md) — Reads current drop-area registration state.
- [getDragSafetyReport](https://grid.syidax.com/docs/methods/getDragSafetyReport.md) — Reports whether row dragging is safe under current settings and describes restrictions.
- [rowMoved](https://grid.syidax.com/docs/events/rowMoved.md) — Emitted when row order changes. Read the affected row and before/after indices.
- [rowDragEnter](https://grid.syidax.com/docs/events/rowDragEnter.md) — Emitted when a row drag enters a target area.
- [rowDragMove](https://grid.syidax.com/docs/events/rowDragMove.md) — Emitted during row dragging. Avoid expensive save operations on every high-frequency event.
- [rowDragLeave](https://grid.syidax.com/docs/events/rowDragLeave.md) — Emitted when a row drag leaves an area. Different from drag completion.
- [rowDragEnd](https://grid.syidax.com/docs/events/rowDragEnd.md) — Emitted when row dragging ends. Inspect the applied result and drop position.
- [rowDragCancel](https://grid.syidax.com/docs/events/rowDragCancel.md) — Emitted when row dragging is cancelled. Do not run completion actions or save server ordering.
- [rowsTransferred](https://grid.syidax.com/docs/events/rowsTransferred.md) — Reports row transfers between drop areas. Inspect actual move, copy, and rejection results.

<a id="next"></a>

## Related reading

- [How rows, columns, and IDs relate](https://grid.syidax.com/docs/guides/concepts.md)
- [Connect results and events](https://grid.syidax.com/docs/guides/data-event-access.md)
- [Explore in Features](https://grid.syidax.com/grid/row-drag) — The guide describes which interactions are available to try.