Arrastar linha em React grade

    O recurso de arrastar Ignite UI for React fileiras no React Grid é facilmente configurável e é usado para rearranjar linhas dentro da grade, arrastando-as e soltando-as para uma nova posição usando o mouse. Ele é inicializado no componente raizIgrGrid e configurável via entradarowDraggable.

    React Grid Row Drag Example

    Configuration

    Para ativar o arrastar de linhas,IgrGrid tudo o que você precisa fazer é definir as graderowDraggable para true. Uma vez ativada, uma alça de arrastar de linha será exibida em cada linha. Essa alça pode ser usada para iniciar arrastar de fileira. Clicar na alavanca de arrastar e mover o cursor enquanto o botão é pressionado fará com que o evento daRowDragStart grade dispare. Soltar o clique a qualquer momento faráRowDragEnd com que o evento dispare.

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

    Templating the Drag Icon

    O ícone da alça de arrastar pode ser modelado usando a gradedragIndicatorIconTemplate. No exemplo que estamos construindo, vamos mudar o ícone do padrão (drag_indicator) para drag_handle.

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

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

    Application Demo

    Row Reordering Demo

    Com a ajuda dos eventos de arrastar linha da grade, você pode criar uma grade que permite reordenar as linhas arrastando-as.

    <IgrGrid rowDraggable={true} primaryKey="ID" onRowDragEnd={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.

    Depois querowDraggable está ativado e uma zona de queda está definida, você precisa implementar um manipulador simples para o evento de drop. Quando uma linha é arrastada, verifique o seguinte:

    • A linha foi lançada dentro da grade?
    • Se sim, em qual outra fileira a fileira arrastada foi largada?
    • Depois de encontrar a linha de destino, troque os registros nodata array

    Abaixo, você pode ver isso implementado:

    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;
}

    Com essas etapas fáceis, você configurou uma grade que permite reordenar linhas por meio de arrastar/soltar! Você pode ver o código acima em ação na demonstração a seguir.

    Segurar o ícone de arrastar permitirá que você mova uma linha para qualquer lugar na grade:

    Limitations

    Atualmente, não existem limitações conhecidas para orowDraggable.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.