React Grid の行ドラッグ

React Grid の Ignite UI for React 行ドラッグ機能は簡単に構成でき、マウスを使用して行を新しい位置にドラッグ アンド ドロップすることで、グリッド内の行を再配置するために使用されます。これはルートの IgrGrid コンポーネントで初期化され、RowDraggable 入力を介して構成できます。

React Grid 行ドラッグの例

構成

IgrGrid の行ドラッグを有効にするには、グリッドの RowDraggable を true に設定します。これが有効になると、行ドラッグ ハンドルが各行に表示されます。このハンドルは行ドラッグを開始するために使用できます。ドラッグ ハンドルをクリックしてボタンを押しながらカーソルを動かすと、グリッドの RowDragStart イベントが発生します。クリックをリリースすると、RowDragEnd イベントが発生します。

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

ドロップ領域のスタイル設定

ドロップ ハンドラが正しく設定されたら、あとはドロップ領域をスタイル設定します。

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

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

ドロップ ハンドラが正しく設定されたら、準備完了です。

以下は、設定の結果です。

デモ

アプリケーション デモ

行ドラッグ イベントの使用

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

Once IgrGrid.rowDraggable is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following:

• Was the row dropped inside of the grid?
• If so, on which other row was the dragged row dropped?
• Once you’ve found the target row, swap the records’ places in the Data array

Below, you can see this implemented:

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

With these few easy steps, you’ve configured a grid that allows reordering rows via drag/drop! You can see the above code in action in the following demo.

Holding onto the drag icon will allow you to move a row anywhere in the grid:

行の並べ替えデモ

グリッドの行ドラッグ イベントと Drop ディレクティブを使用して、ドラッグよる行の並べ替えるが可能なグリッドを作成できます。

API リファレンス

カーソル位置に基づいてドラッグ ゴーストを変更する

以下のスニペットでは、ドラッグ ゴースト内のテキストを変更して、ホバーされた行の名前を表示する方法を示しています。

まず、ドラッグ ゴーストに使用するテンプレートを指定します。DropName プロパティは動的に変化し、カーソルが置かれている行の名前を取得します。