# Drag Column and Row Header

An explanation of the column and row header dragging functionality in SpreadJS, including UI and code snippets

## Content

Using SpreadJS, you can drag columns and rows using headers on the `MouseDown` event to move and insert columns and rows using the [allowDragHeaderToMove](/spreadjs/api/v18/enums/GC.Spread.Sheets.AllowDragHeaderToMove) enumeration option, whose default value is **none**. The enumeration accepts four values as described in the table below:

| Enum Type | Value | Description |
| --------- | ----- | ----------- |
| none | 0 | Specifies that row or column headers cannot be dragged to move. |
| column | 1 | Specifies that only column headers can be dragged to move. |
| row | 2 | Specifies that only row headers can be dragged to move. |
| both | 3 | Specifies that both column and row headers can be dragged to move. |

The cursor changes to a **grab-hand** shape when the mouse is over a draggable header, indicating that dragging is possible, and when dragging begins, the cursor changes to a **grabbing-hand** shape.
The following GIF depicts how the rows and columns are dragged to another location.

![dragdropcolheader](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/dragdropcolheader.6ed720.gif?width=700)

### Using Code

Refer to the following code depicting both columns and rows can be dragged when `allowDragHeaderToMove` enum is set to both.

```javascript
let dragcolumrowheader = spread.options.allowDragHeaderToMove.both;
```

### Using Designer

You can also use this feature using SpreadJS Designer by selecting the desired enum value from the **Drag Header to Move** dropdown available in the **Spread Settings** dialog.

![dragcolrowheader](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/dragcolrowheader.aa0681.png?width=700)

### Limitation

* [TableSheet](/spreadjs/docs/v18/features/tablesheet), [GanttSheet](/spreadjs/docs/v18/features/ganttsheet), and [touch gestures](/spreadjs/docs/v18/touchsupport) do not support dragging headers to move rows and columns.