<commit_before>---
title: "Row Dragging"
---

Row dragging is used to rearrange rows by dragging the row with the mouse. To
enable row dragging, set the column property `rowDrag` on one (typically
the first) column.

## Enabling Row Dragging

To enable row dragging on all columns, set the column property `rowDrag = true` on one (typically the first) column.

<snippet>
const gridOptions = {
    columnDefs: [
        // make all rows draggable
        { field: 'athlete', rowDrag: true },
    ],
}
</snippet>

It is also possible to dynamically control which rows are draggable by providing a callback function as shown below:


<snippet>
const gridOptions = {
    columnDefs: [
        // only allow non-group rows to be dragged
        { field: 'athlete', rowDrag: params => !params.node.group },
    ],
}
</snippet>

The `rowDrag` property can also be a callback function in the the form: 

```ts
// function to enable/disable RowDrag
function rowDragFunction(params: IColumnFunctionCallbackParams) => boolean;

// interface for params
interface IColumnFunctionCallbackParams {
    node: RowNode;
    data: any;
    column: Column;
    colDef: ColDef;
    context: any;
    api: GridApi;
    columnApi: ColumnApi;
}
```

There are two ways in which row dragging works in the grid, managed and unmanaged:

- **Managed Dragging**: This is the simplest, where the grid will rearrange rows as you drag them.
- **Unmanaged Dragging**: This is more complex and more powerful. The grid will not rearrange rows as you drag. Instead the application is responsible for responding to events fired by the grid and rows are rearranged by the application.

## Managed Dragging

In managed dragging, the grid is responsible for rearranging the rows as the rows are dragged. Managed dragging is enabled with the property `rowDragManaged=true`.

The example below shows simple managed dragging. The following can be noted:

- The first column has `rowDrag=true` which results in a draggable area being included in the cell.
- The property `rowDragManaged` is set, to tell the grid to move the row as the row is dragged.
- If a sort (click on the header) or filter (open up the column menu) is applied to the column, the draggable icon for row dragging is hidden. This is consistent with the constraints explained after the example.

<grid-example title='Row Drag Simple Managed' name='simple-managed' type='generated'></grid-example>

The logic for managed dragging is simple and has the following constraints:

- Works with [Client-Side](../client-side-model/) row model only; not with the [Infinite](../infinite-scrolling/), [Server-Side](../server-side-model/) or [Viewport](../viewport/) row models.
- Does not work if [Pagination](../row-pagination/) is enabled.
- Does not work when sorting is applied. This is because the sort order of the rows depends on the data and moving the data would break the sort order.
- Does not work when filtering is applied. This is because a filter removes rows making it impossible to know what 'real' order of rows when some are missing.
- Does not work when row grouping or pivot is active. This is because moving rows between groups would require a knowledge of the underlying data which only your application knows.

These constraints can be bypassed by using [unmanaged row dragging](#unmanaged-dragging).

### Suppress Move When Dragging

By default, the managed row dragging moves the rows while you are dragging them. This effect might not be desirable due to your application design. To prevent this default behaviour, set `suppressMoveWhenRowDragging` to `true` in the `gridOptions`.

<grid-example title='Row Drag with SuppressMoveWhenRowDragging' name='managed-suppress-move-when-dragging' type='generated'></grid-example>

### Multi-Row Dragging

It is possible to drag multiple rows at the same time, when `enableMultiRowDragging` is set to `true` in the `gridOptions` and it is combined with `rowSelection='multiple'`.

For this example note the following:

- When you select multiple items and drag one of them, all items in the selection will be dragged.
- When you drag an item that is not selected while other items are selected, only the unselected item will be dragged.

<grid-example title='Row Drag with Multi Row Drag' name='managed-with-multi-row-drag' type='generated'></grid-example>

## Suppress Row Drag

You can hide the draggable area by calling the grid API `setSuppressRowDrag()`
or by setting the bound property `suppressRowDrag`.

The example below is almost identical to the [Managed Dragging](#managed-dragging) example with the following differences:

- Button **Suppress** will hide the drag icons.
- Button **Remove Suppress** will un-hide the drag icons.
- Applying a sort or a filter to the grid will also suppress the drag icons.

<grid-example title='Suppress Row Drag' name='suppress-row-drag' type='generated'></grid-example>
## Unmanaged Dragging

Unmanaged dragging is the default dragging for the grid. To use it, do not set the property `rowDragManaged`. Unmanaged dragging differs from managed dragging in the following ways:

- The grid does not manage moving of the rows. The only thing the grid responds with is firing drag events. It is up to the application to do the moving of the rows (if that is what the application wants to do).
- Dragging is allowed while sort is applied.
- Dragging is allowed while filter is applied.
- Dragging is allowed while row group or pivot is applied.

[[note]]
| It is not possible for the grid to provide a generic solution for row
| dragging that fits all usage scenarios. The way around this is the grid
| fires events and the application is responsible for implementing what
| meets the application's requirements.

### Row Drag Events

There are four grid events associated with row dragging which are:

- `rowDragEnter`: A drag has started, or dragging already started and the mouse has re-entered the grid having previously left the grid.
- `rowDragMove`: The mouse has moved while dragging.
- `rowDragLeave`: The mouse has left the grid while dragging.
- `rowDragEnd`: The drag has finished over the grid.

Typically a drag will fire the following events:

1. `rowDragEnter` fired once - The drag has started.
1. `rowDragMove` fired multiple times - The mouse is dragging over the rows.
1. `rowDragEnd` fired once - The drag has finished.<commit_msg>AG-3390 - small doc change<commit_after>---
title: "Row Dragging"
---

Row dragging is used to rearrange rows by dragging the row with the mouse. To
enable row dragging, set the column property `rowDrag` on one (typically
the first) column.

## Enabling Row Dragging

To enable row dragging on all columns, set the column property `rowDrag = true` on one (typically the first) column.

<snippet>
const gridOptions = {
    columnDefs: [
        // make all rows draggable
        { field: 'athlete', rowDrag: true },
    ],
}
</snippet>

It is also possible to dynamically control which rows are draggable by providing a callback function as shown below:


<snippet>
const gridOptions = {
    columnDefs: [
        // only allow non-group rows to be dragged
        { field: 'athlete', rowDrag: params => !params.node.group },
    ],
}
</snippet>

The `rowDrag` property can also be a callback function in the the form: 

```ts
// function to enable/disable RowDrag
function rowDragFunction(params: IColumnFunctionCallbackParams) => boolean;

// interface for params
interface IColumnFunctionCallbackParams {
    node: RowNode;
    data: any;
    column: Column;
    colDef: ColDef;
    context: any;
    api: GridApi;
    columnApi: ColumnApi;
}
```

There are two ways in which row dragging works in the grid, managed and unmanaged:

- **Managed Dragging**: This is the simplest, where the grid will rearrange rows as you drag them.
- **Unmanaged Dragging**: This is more complex and more powerful. The grid will not rearrange rows as you drag. Instead the application is responsible for responding to events fired by the grid and rows are rearranged by the application.

## Managed Dragging

In managed dragging, the grid is responsible for rearranging the rows as the rows are dragged. Managed dragging is enabled with the property `rowDragManaged=true`.

The example below shows simple managed dragging. The following can be noted:

- The first column has `rowDrag=true` which results in a draggable area being included in the cell.
- The property `rowDragManaged` is set, to tell the grid to move the row as the row is dragged.
- If a sort (click on the header) or filter (open up the column menu) is applied to the column, the draggable icon for row dragging is hidden. This is consistent with the constraints explained after the example.

<grid-example title='Row Drag Simple Managed' name='simple-managed' type='generated'></grid-example>

The logic for managed dragging is simple and has the following constraints:

- Works with [Client-Side](../client-side-model/) row model only; not with the [Infinite](../infinite-scrolling/), [Server-Side](../server-side-model/) or [Viewport](../viewport/) row models.
- Does not work if [Pagination](../row-pagination/) is enabled.
- Does not work when sorting is applied. This is because the sort order of the rows depends on the data and moving the data would break the sort order.
- Does not work when filtering is applied. This is because a filter removes rows making it impossible to know what 'real' order of rows when some are missing.
- Does not work when row grouping or pivot is active. This is because moving rows between groups would require a knowledge of the underlying data which only your application knows.

These constraints can be bypassed by using [unmanaged row dragging](#unmanaged-dragging).

### Suppress Move When Dragging

By default, the managed row dragging moves the rows while you are dragging them. This effect might not be desirable due to your application design. To prevent this default behaviour, set `suppressMoveWhenRowDragging` to `true` in the `gridOptions`.

<grid-example title='Row Drag with SuppressMoveWhenRowDragging' name='managed-suppress-move-when-dragging' type='generated'></grid-example>

### Multi-Row Dragging

It is possible to drag multiple rows at the same time, when `enableMultiRowDragging` is set to `true` in the `gridOptions` and it is combined with `rowSelection='multiple'`.

For this example note the following:

- When you select multiple items and drag one of them, all items in the selection will be dragged.
- When you drag an item that is not selected while other items are selected, only the unselected item will be dragged.

<grid-example title='Row Drag with Multi Row Drag' name='managed-with-multi-row-drag' type='generated'></grid-example>

## Suppress Row Drag

You can hide the draggable area by calling the grid API `setSuppressRowDrag()`
or by setting the bound property `suppressRowDrag`.

The example below is almost identical to the [Managed Dragging](#managed-dragging) example with the following differences:

- Button **Suppress** will hide the drag icons.
- Button **Remove Suppress** will un-hide the drag icons.
- Applying a sort or a filter to the grid will also suppress the drag icons.

<grid-example title='Suppress Row Drag' name='suppress-row-drag' type='generated'></grid-example>

## Unmanaged Dragging

Unmanaged dragging is the default dragging for the grid. To use it, do not set the property `rowDragManaged`. Unmanaged dragging differs from managed dragging in the following ways:

- The grid does not manage moving of the rows. The only thing the grid responds with is firing drag events. It is up to the application to do the moving of the rows (if that is what the application wants to do).
- Dragging is allowed while sort is applied.
- Dragging is allowed while filter is applied.
- Dragging is allowed while row group or pivot is applied.

[[note]]
| It is not possible for the grid to provide a generic solution for row
| dragging that fits all usage scenarios. The way around this is the grid
| fires events and the application is responsible for implementing what
| meets the application's requirements.

### Row Drag Events

There are four grid events associated with row dragging which are:

- `rowDragEnter`: A drag has started, or dragging already started and the mouse has re-entered the grid having previously left the grid.
- `rowDragMove`: The mouse has moved while dragging.
- `rowDragLeave`: The mouse has left the grid while dragging.
- `rowDragEnd`: The drag has finished over the grid.

Typically a drag will fire the following events:

1. `rowDragEnter` fired once - The drag has started.
1. `rowDragMove` fired multiple times - The mouse is dragging over the rows.
1. `rowDragEnd` fired once - The drag has finished.
{'fraction_non_alphanumeric': 0.07096976343412188, 'fraction_numerical': 0.0007833307222309259, 'mean_word_length': 4.168825910931174, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 31, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '983829', 'n_tokens_mistral': 3326, 'n_tokens_neox': 3213, 'n_words': 1796}