# 열과 행 헤더 드래그 

## Content

SpreadJS를 사용하면 [allowDragHeaderToMove](/spreadjs/api/v18/enums/GC.Spread.Sheets.AllowDragHeaderToMove) 열거형 옵션을 통해 `MouseDown` 이벤트에서 머리글을 드래그하여 행과 열을 이동 및 삽입할 수 있습니다. 이 옵션의 기본값은 **none**이며, 아래 표와 같이 네 가지 값을 지원합니다:

| 열거형 타입 | 값 | 설명 |
| ------ | --- | --- |
| `none` | 0 | 행 또는 열 머리글을 드래그하여 이동할 수 없습니다. |
| `column` | 1 | 열 머리글만 드래그하여 이동할 수 있습니다. |
| `row` | 2 | 행 머리글만 드래그하여 이동할 수 있습니다. |
| `both` | 3 | 행과 열 머리글 모두 드래그하여 이동할 수 있습니다. |

드래그할 수 있는 머리글 위에 마우스를 올리면 커서가 '**손 모양(grab-hand)**'으로 변경되어 드래그 가능함을 나타내며, 드래그가 시작되면 '잡고 있는 **'손 모양(grabbing-hand)**'으로 커서가 바뀝니다.
다음 GIF는 행과 열을 드래그하여 다른 위치로 이동하는 과정을 보여줍니다.
![dragdropcolheader.6ed720](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/dragdropcolheader.6ed720.1561ef.gif)

### 코드 예시

`allowDragHeaderToMove` 열거형을 `both`로 설정하면 열과 행 모두 드래그할 수 있습니다.

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

### 디자이너에서 사용하기

SpreadJS 디자이너에서도 이 기능을 사용할 수 있습니다. **설정(Settings)** 탭에서 **Spread 설정 (Spread Settings)** 대화상자를 열고, **헤더를 드래그하여 이동(Drag Header to Move)** 드롭다운에서 원하는 열거형(enum) 값을 선택하면 됩니다.
![dragcolrowheader.aa0681](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d37fbce1-6a37-43ce-b728-dd79fba68421/dragcolrowheader.aa0681.617156.png)

### 제한사항

* [테이블 시트](/spreadjs/docs/v18/features/tablesheet), [간트 시트](/spreadjs/docs/v18/features/ganttsheet), [터치 지원](/spreadjs/docs/v18/touchsupport) 기능은 머리글을 드래그하여 행과 열을 이동하는 기능을 지원하지 않습니다.