Arrastar linha em Web Components grade

    O recurso Ignite UI for Web Components arrastar linha em Web Components grade é facilmente configurável e é usado para reorganizar linhas dentro da grade arrastando e soltando-as em uma nova posição usando o mouse. Ele é inicializado no componente raiz IgcGridComponent e é configurável por meio da rowDraggable entrada.

    Web Components Grid Row Drag Example

    Configuração

    Para habilitar o arrasto de linha para você IgcGridComponent, tudo o que você precisa fazer é definir a grade rowDraggable como true. Depois que isso estiver ativado, uma alça de arrastar linha será exibida em cada linha. Essa alça pode ser usada para iniciar o arrasto de linha. Clicar na alça de arrastar e mover o cursor enquanto mantém pressionado o botão fará com que o evento da RowDragStart grade seja acionado. Liberar o clique a qualquer momento fará com que RowDragEnd o evento seja acionado.

    <igc-grid row-draggable="true">
</igc-grid>

    Templating the Drag Icon

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

    Para fazer isso, podemos usar o DragIndicatorIcon para passar um modelo dentro do igc-grid corpo:

    <igc-grid row-draggable="true" id="grid">
</igc-grid>

    constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent;
    grid.dragIndicatorIconTemplate = this.dragIndicatorIconTemplate;
}

public dragIndicatorIconTemplate = (ctx: IgcGridEmptyTemplateContext) => {
    return html`<igc-icon name="drag_handle" collection="material"></igc-icon>`;
}

    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.

    <igc-grid id="grid" row-draggable="true" primary-key="ID">
</igc-grid>

    constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
    grid.addEventListener("rowDragEnd", this.webGridReorderRowHandler)
}

    [!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.

    Uma vez rowDraggable habilitado e uma zona de queda definida, você precisa implementar um manipulador simples para o evento de queda. Quando uma linha é arrastada, verifique o seguinte:

    • A linha foi lançada dentro da grade?
    • Em caso afirmativo, em qual outra linha a linha arrastada foi solta?
    • Depois de encontrar a linha de destino, troque os lugares dos registros na data matriz

    Abaixo, você pode ver isso implementado:

    public webGridReorderRowHandler(args: CustomEvent<IgcRowDragEndEventArgs>): void {
    const ghostElement = args.detail.dragDirective.ghostElement;
    const dragElementPos = ghostElement.getBoundingClientRect();
    const grid = document.getElementsByTagName("igc-grid")[0] as any;
    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);
}
    
public 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 há limitações conhecidas para o rowDraggable.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.