React Grid에서 행 드래그

    React 그리드의 Ignite UI for React 행 드래그 기능은 쉽게 구성할 수 있으며 마우스를 사용하여 행을 새 위치로 끌어다 놓아 그리드 내의 행을 재정렬하는 데 사용됩니다. 루트에서 초기화됩니다 IgrGrid 구성 요소이며 다음을 통해 구성할 수 있습니다. rowDraggable 입력.

    React Grid Row 드래그 예제

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    구성

    ​IgrGrid에 대해 행 드래그를 활성화하려면 그리드의 rowDraggable​ ​true로 설정하기만 하면 됩니다. 이 기능이 활성화되면 행 끌기 핸들이 각 행에 표시됩니다. 이 핸들을 사용하여 행 끌기를 시작할 수 있습니다. 드래그 핸들을 클릭하고 버튼을 누른 채 커서를 움직이면 그리드의 RowDragStart 이벤트가 발생합니다. 언제든지 클릭을 놓으면 RowDragEnd 이벤트가 발생합니다.

    <IgrGrid rowDraggable={true}>
</IgrGrid>
tsx

    드래그 아이콘 템플릿 만들기

    드래그 핸들 아이콘은 그리드의 dragIndicatorIconTemplate 사용하여 템플릿화할 수 있습니다. 우리가 만들고 있는 예제에서 아이콘을 기본 아이콘(drag_indicator)에서 drag_handle로 변경해 보겠습니다.

    const dragIndicatorIconTemplate = (ctx: IgrGridEmptyTemplateContext) => {
    return (
        <>
            <IgrIcon name="drag_handle" collection="material" />
        </>
    );
}

<IgrGrid rowDraggable={true} dragIndicatorIconTemplate={dragIndicatorIconTemplate}>
</IgrGrid>
tsx

    애플리케이션 데모

    행 재정렬 데모

    그리드의 행 드래그 이벤트를 사용하면 행을 드래그하여 재정렬할 수 있는 그리드를 생성할 수 있습니다.

    <IgrGrid rowDraggable={true} primaryKey="ID" onRowDragEnd={webGridReorderRowHandler}>
</IgrGrid>
tsx

    그리드에 대해 기본 키가 지정되어 있는지 확인하세요! 논리에는 행을 올바르게 다시 정렬할 수 있도록 행에 대한 고유 식별자가 필요합니다.

    ​rowDraggable 활성화되고 드롭 영역이 정의되면 드롭 이벤트에 대한 간단한 핸들러를 구현해야 합니다. 행을 드래그할 때 다음을 확인하세요.

    • 행이 그리드 내부에 삭제되었습니까?
    • 그렇다면 드래그된 행이 다른 어느 행에 삭제되었습니까?
    • ​대상 행을 찾았으면 data 배열에서 레코드 위치를 바꿉니다.

    아래에서 이것이 구현된 것을 볼 수 있습니다.

    const webGridReorderRowHandler = (args: IgrRowDragEndEventArgs): void => {
    const ghostElement = args.detail.dragDirective.ghostElement;
    const dragElementPos = ghostElement.getBoundingClientRect();
    const rows = Array.prototype.slice.call(document.getElementsByTagName("igx-grid-row"));
    const currRowIndex = getCurrentRowIndex(rows,
    { x: dragElementPos.x, y: dragElementPos.y });
    if (currRowIndex === -1) { return; }
    // remove the row that was dragged and place it onto its new location
    gridRef.current.deleteRow(args.detail.dragData.key);
    gridRef.current.data.splice(currRowIndex, 0, args.detail.dragData.data);
}
    
const getCurrentRowIndex = (rowList: any[], cursorPosition) => {
    for (const row of rowList) {
        const rowRect = row.getBoundingClientRect();
        if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY &&
            cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) {
            // return the index of the targeted row
            return parseInt(row.attributes["data-rowindex"].value);
        }
    }
    return -1;
}
tsx

    이러한 몇 가지 간단한 단계를 통해 드래그/드롭을 통해 행을 재정렬할 수 있는 그리드를 구성했습니다! 다음 데모에서 위 코드가 실제로 작동하는 모습을 볼 수 있습니다.

    드래그 아이콘을 누르고 있으면 그리드의 어느 곳으로든 행을 이동할 수 있습니다.

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    제한 사항

    현재 rowDraggable 에는 알려진 제한 사항이 없습니다.

    API 참조

    추가 리소스

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.