# Drag Column and Row Header

## 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](https://docapp.mescius.io/manage/ArticleEdit//spreadjs/api/v17/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.6ed720](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/dragdropcolheader.6ed720.1561ef.gif)

### 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.aa0681](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/dragcolrowheader.aa0681.617156.png)

### Limitation

* [TableSheet](https://docapp.mescius.io/manage/ArticleEdit//spreadjs/docs/v17/features/tablesheet), [GanttSheet](https://docapp.mescius.io/manage/ArticleEdit//spreadjs/docs/v17/features/ganttsheet), and [touch gestures](https://docapp.mescius.io/manage/ArticleEdit//spreadjs/docs/v17/touchsupport) do not support dragging headers to move rows and columns.