SYIDAX / DATA GRID

행 드래그

드래그 핸들로 행 순서를 바꾸거나 다른 그리드로 옮깁니다.

행 드래그샘플 주문 데이터

120 rows

Grid를 불러오는 중입니다…

최근 결과

앱에서 제품 열의 rowDrag를 켜고 Grid의 rowDragManaged를 켜세요. 현재 기본 표에는 행 이동 손잡이가 표시되지 않습니다.

코드 보기

현재 미리보기

사용 가이드

사용자가 할 일의 우선순위나 항목 순서를 직접 바꾸게 하고 싶을 때 사용합니다. 행을 선택하는 동작과 드래그로 이동하는 동작을 구분합니다.

이동 손잡이 표시
앱에서 제품 열의 rowDrag를 켜고 Grid의 rowDragManaged를 켜세요. 현재 기본 표에는 행 이동 손잡이가 표시되지 않습니다.
원래 순서에서 이동
정렬과 필터를 해제한 상태에서 손잡이를 잡고 다른 행 사이로 옮겨보세요. 정렬 중에는 드래그 순서가 표시 순서와 충돌할 수 있습니다.
바뀐 순서 보관
rowMoved 이벤트에서 변경 결과를 읽으세요. 새로고침 후에도 순서를 유지하려면 앱의 데이터 저장소에 저장합니다.

확인할 결과

앱의 목록에서 사용자가 지정한 순서로 행이 재배치됩니다.

다른 Grid로 행을 옮기는 기능은 대상 Grid 연결이 추가로 필요합니다. 이 한 개의 미리보기만으로 두 표 간 이동을 체험할 수는 없습니다.

등록된 Grid 요소를 grid로 참조하는 앱 코드입니다.

grid.rowDragManaged = true;
grid.columnDefs = grid.columnDefs.map(col => ({...col,rowDrag:col.field==='product'}));

나머지 속성3

Attribute / Property	타입 / 기본값	설명
rowDragManaged	`boolean`기본값 false	managed row reorder. When true, a column with `rowDrag: true` shows a drag handle; dragging it reorders `rowData` (client mode only, and only while the display order equals the source order — no sort / filter / group / tree / pagination / infinite).
rowDragMultiRow	`boolean`기본값 false	(PF-ROWLAYOUT-WIRING-01 batch B, AG `rowDragMultiRow`) — when true, an UNMANAGED drag started on a selected row carries every selected row (the item's `rowKeys` / `rows`); otherwise one row travels.
rowDragText	`(params: { count: number; label: string }) => string`기본값 undefined	(AG `rowDragText`) — the ghost label for an unmanaged drag; default `"<label>"` or `"<label> (+N)"` for a multi-row item.

이벤트7

이벤트	detail 타입	설명
	`{ fromIndex: number; toIndex: number; row: unknown }`	fires after a managed row drag reorders the data.
	`SyGridRowDragEventDetail`	ADR-009 — typed accessor for the lazy 93 SSRM ops chunk ('ssrm-ops'). a drag session started (`kind: 'start'`), or entered a zone.
	`SyGridRowDragEventDetail`	the drop target moved.
	`SyGridRowDragEventDetail`	the pointer left every target (or the target went stale under a scroll).
	`SyGridRowDragEndDetail`	a drop completed: DELEGATED over this grid (nothing moved) or transferred to a zone.
	`SyGridRowDragCancelDetail`	the session ended without a drop (escape, blur, capture lost, disconnect, watchdog…).
	`SyGridRowsTransferredDetail`	a transfer into a registered zone was planned, committed and applied (or reverted).

메서드6

메서드 / 인수	반환 타입	설명
input: SyGridRowDragStartInput	`Promise<SyGridRowDragStartResult>`	start an unmanaged drag from the API: a KEYBOARD grab of the row (arrows move it, `Enter` drops → `rowDragEnd` with `keyboard: true`, `Escape` cancels). A pointer session can only start from a real pointer-down on the handle — the gesture threshold and the pointer capture are what a pointer session IS, so the method says so rather than fake one.
	`Promise<SyGridRowDragSessionReport>`	the live (or last) drag session, the gesture, the residue and the zones.
input: SyGridDropZoneInput	`Promise<SyGridDropZoneRegistration>`	register a drop zone: `kind: 'grid'` with `grid` (a peer `<sy-grid>` element — its rows are read live and written on a transfer) or `kind: 'external'` with `element` (any element or selector; what lands there is delivered through `onDrop`).
zoneId: string	`Promise<boolean>`	remove a zone; a drag targeting it is cancelled. The grid's own zone cannot be removed.
	`Promise<SyGridDropZonesReport>`	the zone registry (own zone included), its generation and the active target.
	`Promise<SyGridDragSafetyReport>`	the drag-safety monitor: live/stuck drags, aborts by cause, the watchdog.

ColumnDef1

ColumnDef	타입 / 필수 여부	설명
	`boolean`선택	show a row-drag handle in this column's cells. Combined with the grid's `row-drag-managed` prop, dragging the handle reorders `rowData`.