Web Components Grid の行ドラッグ

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

Web Components Grid 行ドラッグの例

構成

IgcGrid の行ドラッグを有効にするには、グリッドの IgcGrid.rowDraggable を true に設定するだけです。これが有効になると、行ドラッグ ハンドルが各行に表示されます。このハンドルを使用して行ドラッグを開始できます。ドラッグ ハンドルをクリックし、マウスボタンを押したままカーソルを移動すると、グリッドの IgcGrid.rowDragStart イベントが発生します。ドラッグ中にマウスボタンを離すと IgcGrid.rowDragEnd イベントが発生します。

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

ドロップ エリア

はじめに、DragDropModule を登録する必要があります。

import { IgcDragDropModule } from 'igniteui-webcomponents';
// ...
ModuleManager.register(
    IgcDragDropModule
);

この場合、ドロップ エリアは行をドロップする 2 つ目のグリッド全体になります。

<igc-grid id="targetGrid" auto-generate="false" primary-key="ID">
</igc-grid>

constructor() {
    var targetGrid = this.targetGrid = document.getElementById('targetGrid') as IgcGridComponent;

    this._bind = () => {
        targetGrid.data = this.data;
        targetGrid.emptyGridTemplate = this.dragHereTemplate;
        targetGrid.enter = this.onEnterAllowed;
        targetGrid.leave = this.onLeaveAllowed;
        targetGrid.dropped = this.onDropAllowed;
    }
    this._bind();
}

public dragHereTemplate = (ctx: IgcGridEmptyTemplateContext) => {
    return html`Drop a row to add it to the grid`;
}

export class IgcGridRowDragComponent {
    constructor() {
        var sourceGrid = this.sourceGrid = document.getElementById('sourceGrid') as IgcGridComponent;
        var targetGrid = this.targetGrid = document.getElementById('targetGrid') as IgcGridComponent;
    }

    public onDropAllowed(args) {
        this.targetGrid.addRow(args.dragData.data);
        this.sourceGrid.deleteRow(args.dragData.key);
    }
}

constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGridComponent;

    this._bind = () => {
        grid.rowDragGhost = this.rowDragGhostTemplate;
    }
    this._bind();
}

public rowDragGhostTemplate = (ctx: IgcGridRowDragGhostContext) => {
    return html`<igc-icon fontSet="material">arrow_right_alt</igc-icon>`;
}

ドラッグ アイコンのテンプレート化

ドラッグ ハンドル アイコンは、グリッドの DragIndicatorIconTemplate を使用してテンプレート化できます。作成中の例では、デフォルトのアイコン (drag_indicator) を drag_handle に変更してみましょう。

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

設定の結果は以下で確認できます。

デモ

アプリケーション デモ

行の並べ替えデモ

グリッドの行ドラッグ イベントを使用すると、行をドラッグして並べ替えられるグリッドを作成できます。

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

IgcGrid.rowDraggable が有効になり、ドロップ エリアが定義されたら、ドロップ イベント用の簡単なハンドラーを実装する必要があります。行がドラッグされたときは、次を確認します。

• 行はグリッド内にドロップされたか
• ドロップされた場合、ドラッグされた行が別のどの行にドロップされたか
• ターゲット行が見つかったら、Data 配列内でレコードの位置を入れ替える

以下は、その実装例です。

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

これらの簡単な手順で、ドラッグ アンド ドロップによる行の並べ替えが可能なグリッドを設定できました。上記のコードの動作は、以下のデモで確認できます。

マウスボタンでドラッグ アイコンを押したままの状態でドラッグすると、行をグリッド内の任意の場所に移動できます。

制限

現在、IgcGrid.rowDraggable に関する既知の制限事項はありません。

API リファレンス

その他のリソース

コミュニティは常に新しいアイデアを歓迎しています。

• Ignite UI for Web Components フォーラム
• Ignite UI for Web Components GitHub