React Grid에서 행 끌기

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

    React Grid Row Drag Example

    Configuration

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

    <IgrGrid rowDraggable="true">
</IgrGrid>

    Templating the Drag Icon

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

    이를 위해 DragIndicatorIcon 사용하여 IgrGrid 본문 내부에 템플릿을 전달할 수 있습니다.

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

<IgrGrid rowDraggable="true" dragIndicatorIcon={dragIndicatorIconTemplate}>
</IgrGrid>

    Application Demo

    Row Reordering Demo

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

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

    [!Note] Make sure that there is a primaryKey specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered.

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

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

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

    function webGridReorderRowHandler(grid: IgrGridBaseDirective, 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 = this.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
    grid.deleteRow(args.detail.dragData.key);
    grid.data.splice(currRowIndex, 0, args.detail.dragData.data);
}
    
function 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;
}

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

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

    Limitations

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

    API References

    Additional Resources

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