---
title: "Unmanaged Row Dragging"
framework: vue
version: "36.1.0"
---
# Unmanaged Row Dragging
Unmanaged dragging is the default dragging for the grid. To use it, do not set the property `rowDragManaged`.
#### Row Drag Simple Unmanaged
```ts
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
ColumnApiModule,
GetRowIdFunc,
GetRowIdParams,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
NumberFilterModule,
RowDragModule,
RowDragMoveEvent,
TextFilterModule,
enableDevValidations,
} from "ag-grid-community";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
RowDragModule,
TextFilterModule,
NumberFilterModule,
ClientSideRowModelModule,
ColumnApiModule,
]);
let immutableStore: any[] = getData();
let sortActive = false;
let filterActive = false;
const VueExample = defineComponent({
template: `
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef(null);
const columnDefs = ref([
{ field: "athlete", rowDrag: true },
{ field: "country" },
{ field: "year", width: 100 },
{ field: "date" },
{ field: "sport" },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
]);
const defaultColDef = ref({
width: 170,
filter: true,
});
const rowData = ref(null);
// listen for change on sort changed
function onSortChanged() {
const colState = gridApi.value!.getColumnState() || [];
sortActive = colState.some((c) => c.sort);
// suppress row drag if either sort or filter is active
const suppressRowDrag = sortActive || filterActive;
console.log(
"sortActive = " +
sortActive +
", filterActive = " +
filterActive +
", suppressRowDrag = " +
suppressRowDrag,
);
gridApi.value!.setGridOption("suppressRowDrag", suppressRowDrag);
}
// listen for changes on filter changed
function onFilterChanged() {
filterActive = gridApi.value!.isAnyFilterPresent();
// suppress row drag if either sort or filter is active
const suppressRowDrag = sortActive || filterActive;
console.log(
"sortActive = " +
sortActive +
", filterActive = " +
filterActive +
", suppressRowDrag = " +
suppressRowDrag,
);
gridApi.value!.setGridOption("suppressRowDrag", suppressRowDrag);
}
function onRowDragMove(event: RowDragMoveEvent) {
const movingNode = event.node;
const overNode = event.overNode;
const rowNeedsToMove = movingNode !== overNode;
if (rowNeedsToMove) {
// the list of rows we have is data, not row nodes, so extract the data
const movingData = movingNode.data;
const overData = overNode!.data;
const fromIndex = immutableStore.indexOf(movingData);
const toIndex = immutableStore.indexOf(overData);
const newStore = immutableStore.slice();
moveInArray(newStore, fromIndex, toIndex);
immutableStore = newStore;
gridApi.value!.setGridOption("rowData", newStore);
gridApi.value!.clearFocusedCell();
}
function moveInArray(arr: any[], fromIndex: number, toIndex: number) {
const element = arr[fromIndex];
arr.splice(fromIndex, 1);
arr.splice(toIndex, 0, element);
}
}
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
// add id to each item, needed for immutable store to work
immutableStore.forEach(function (data, index) {
data.id = index;
});
params.api.setGridOption("rowData", immutableStore);
};
function getRowId(params: GetRowIdParams) {
return String(params.data.id);
}
return {
gridApi,
columnDefs,
defaultColDef,
getRowId,
rowData,
onGridReady,
onSortChanged,
onFilterChanged,
onRowDragMove,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
```
[Live example: Row Drag Simple Unmanaged](https://www.ag-grid.com/examples/row-dragging-unmanaged/simple-unmanaged/vue3)
The example above shows how to implement simple row dragging using unmanaged row dragging and events similarly to the [Managed Row Dragging](https://www.ag-grid.com/vue-data-grid/row-dragging-managed/) example; however, the logic for moving the rows is in the application rather than the grid.
The property `suppressRowDrag=true` is set by the application depending on whether sorting or filtering is active. This is because the logic in the example doesn't cover these scenarios and wants to prevent row dragging when sorting or filtering is active.
## Differences from Managed Row Dragging
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. Unmanaged row dragging is provided as a way for the application developer to meet their requirements by responding to events emitted by the grid.
## Row Drag Events
Row drag events are raised by both [Managed Row Dragging](https://www.ag-grid.com/vue-data-grid/row-dragging-managed/) and unmanaged row dragging.
There are five 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.
- `rowDragCancel`: The drag has cancelled over the grid.
Typically a drag will fire the following events:
1. `rowDragEnter` fired once - The drag has started.
2. `rowDragMove` fired multiple times - The mouse is dragging over the rows.
3. `rowDragEnd` fired once - The drag has finished.
Additional `rowDragLeave` and `rowDragEnter` events are fired if the mouse leaves or re-enters the grid. If the drag is finished outside of the grid, then the `rowDragLeave` is the last event fired and no `rowDragEnd` is fired, as the drag did not end on the grid.
> **Note**
>
> When the Grid is created, a [Drop Zone](https://www.ag-grid.com/vue-data-grid/row-dragging-to-external-dropzone/) that is responsible for firing all the Row Drag Events is added to the Grid Body. This why Row Drag Events (including `rowDragEnd`) are only fired when they happen on top of the Grid. If you need to monitor when a Row Drag ends outside of the Grid, for example, use the [DragStopped](https://www.ag-grid.com/vue-data-grid/grid-events/#reference-dragAndDrop-dragStopped) event.
Each of the five row drag events extend the `RowDragEvent` interface.
Properties available on the `RowDragEvent<TData = any, TContext = any, T extends RowDragEventType = RowDragEventType>` interface.
| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `node` | [`IRowNode`](https://www.ag-grid.com/vue-data-grid/row-object/) | | | The row node getting dragged. Also the node that started the drag when multi-row dragging. |
| `nodes` | [`IRowNode[]`](https://www.ag-grid.com/vue-data-grid/row-object/) | | | The list of nodes being dragged. |
| `event` | [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent) | | | The underlying mouse move event associated with the drag. |
| `eventPath` | `EventTarget[]` | | | The `eventPath` persists the `event.composedPath()` result for access within AG Grid event handlers. |
| `vDirection` | `'up' \| 'down' \| null` | | | Direction of the drag, either `'up'`, `'down'` or `null` (if mouse is moving horizontally and not vertically). |
| `overIndex` | `number` | | | The row index the mouse is dragging over or -1 if over no row. |
| `overNode` | [`IRowNode`](https://www.ag-grid.com/vue-data-grid/row-object/) | | | The row node the mouse is dragging over or undefined if over no row. |
| `y` | `number` | | | The vertical pixel location the mouse is over, with `0` meaning the top of the first row. This can be compared to the `rowNode.rowHeight` and `rowNode.rowTop` to work out the mouse position relative to rows. The provided attributes `overIndex` and `overNode` means the `y` property is mostly redundant. The `y` property can be handy if you want more information such as 'how close is the mouse to the top or bottom of the row?' |
| `rowsDrop` | `RowsDropParams \| null` | | | Details about the row dragging drop target. |
| `api` | [`GridApi`](https://www.ag-grid.com/vue-data-grid/grid-api/) | | | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/vue-data-grid/typescript-generics/#context-tcontext) | | | Application context as set on `gridOptions.context`. |
| `type` | `TEventType` | | | Event identifier |
## Example Events
The following example demonstrates unmanaged row dragging with no attempt by the application or the grid to re-order the rows. This is on purpose to demonstrate that the grid will not attempt to re-order rows unless the `rowDragManaged` property is set to true. The example also demonstrates all the events that are fired.
From the example the following can be noted:
- The first column has `rowDrag=true` which results in a draggable area included in the cell.
- The grid has not set `rowDragManaged` which results in the grid not reordering rows as they are dragged.
- All of the drag events are listened for and when one is received, it is printed to the console. To best see this, open the example in a new tab and open the developer console.
- Because `rowDragManaged` is not set, the row dragging is left enabled even if sorting or filtering is applied. This is because your application should decide if dragging should be allowed or suppressed using the `suppressRowDrag` property.
- While dragging the row, the `setRowDropPositionIndicator` API method is called to display the projected row drop location using a horizontal line indicator.
#### Row Drag Events
```ts
import {
createApp,
defineComponent,
onBeforeMount,
ref,
shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
ClientSideRowModelModule,
ColDef,
ColGroupDef,
GridApi,
GridOptions,
GridReadyEvent,
ModuleRegistry,
NumberFilterModule,
RowDragCancelEvent,
RowDragEndEvent,
RowDragEnterEvent,
RowDragLeaveEvent,
RowDragModule,
RowDragMoveEvent,
TextFilterModule,
enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
RowDragModule,
TextFilterModule,
NumberFilterModule,
ClientSideRowModelModule,
]);
const VueExample = defineComponent({
template: `
`,
components: {
"ag-grid-vue": AgGridVue,
},
setup(props) {
const gridApi = shallowRef | null>(null);
const columnDefs = ref([
{ field: "athlete", rowDrag: true },
{ field: "country" },
{ field: "year", width: 100 },
{ field: "date" },
{ field: "sport" },
{ field: "gold" },
{ field: "silver" },
{ field: "bronze" },
]);
const defaultColDef = ref({
width: 170,
filter: true,
});
const rowData = ref(null);
function onRowDragEnter(e: RowDragEnterEvent) {
console.log("onRowDragEnter: node", e.node.id);
}
function onRowDragEnd(e: RowDragEndEvent) {
console.log("onRowDragEnd: node", e.node.id);
e.api.setRowDropPositionIndicator(null);
}
function onRowDragMove(e: RowDragMoveEvent) {
console.log("onRowDragMove: node", e.node.id);
const overNodeTop = e.overNode?.rowTop ?? 0;
const overNodeHeight = e.overNode?.rowHeight ?? 0;
// yRatio is 0 if the mouse is in the center of the row, less than -0.5 if above, greater than 0.5 if below
const yRatio = (e.y - overNodeTop - overNodeHeight / 2) / overNodeHeight;
e.api.setRowDropPositionIndicator({
row: e.overNode,
dropIndicatorPosition: yRatio < 0 ? "above" : "below",
});
}
function onRowDragLeave(e: RowDragLeaveEvent) {
console.log("onRowDragLeave: node", e.node.id);
e.api.setRowDropPositionIndicator(null);
}
function onRowDragCancel(e: RowDragCancelEvent) {
console.log("onRowDragCancel: node", e.node.id);
e.api.setRowDropPositionIndicator(null);
}
const onGridReady = (params: GridReadyEvent) => {
gridApi.value = params.api;
const updateData = (data) => (rowData.value = data);
fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
.then((resp) => resp.json())
.then((data) => updateData(data));
};
return {
gridApi,
columnDefs,
defaultColDef,
rowData,
onGridReady,
onRowDragEnter,
onRowDragEnd,
onRowDragMove,
onRowDragLeave,
onRowDragCancel,
};
},
});
const app = createApp(VueExample);
app.mount("#app");
```
[Live example: Row Drag Events](https://www.ag-grid.com/examples/row-dragging-unmanaged/dragging-events/vue3)
> **Note**
>
> When dragging Multiple Rows with unmanaged row dragging, the application is in control of what gets dragged. It is possible to use the events to drag more than one row at a time, e.g. to move all selected rows in one go if using row selection.
See also [Preventing Dropping on Certain Rows](https://www.ag-grid.com/vue-data-grid/row-dragging-managed/#preventing-dropping-on-certain-rows).
> **Note**
>
> For grouping-specific guidance, including managed row dragging support, see [Row Dragging with Row Groups](https://www.ag-grid.com/vue-data-grid/grouping-row-dragging/).
## Other Row Models
Unmanaged row dragging will work with any of the row models - [Infinite](https://www.ag-grid.com/vue-data-grid/infinite-scrolling/), [Server-Side](https://www.ag-grid.com/vue-data-grid/server-side-model/) and [Viewport](https://www.ag-grid.com/vue-data-grid/viewport/). With unmanaged dragging, the implementation of what happens when a particular drag happens is up to your application.