【ag-Grid】グリッド間のドラッグ&ドロップ

はじめに

こんにちは、kanoです。
先日、JavaScriptのグリッドライブラリであるag-Gridを検証しました。
ag-Gridの機能は多岐に渡りますが、今回はグリッド間でデータをドラッグ&ドロップする機能の実装方法をご紹介します。

ag-Grid: Dragging Multiple Records Between Grids
https://www.ag-grid.com/javascript-grid-row-dragging-to-grid/#dragging-multiple-records-between-grids

完成イメージ

左側は選択候補のグリッド、右側は選択済データのグリッドです。

以下の操作を想定しています。

①任意のデータを選択

②左のグリッドから右のグリッドにドラッグ&ドロップ

▲赤枠の部分をマウスでドラッグします
▲ドロップすると、左側のデータがなくなり右側に追加されます

③右から左にドラッグ&ドロップして選択を取り消し

▲同様に右から左への移動も可能です

検証バージョン

  • Vue.js:v2.6.11
  • ag-Grid:v23.1.1
     ※有償版(ag-Grid Enterprise)

実装内容

ソースコードは以下です。
スクロールしてソースコード全体が確認できます。(ツールバーから新しいウィンドウでコードを開くことも可能です)

〇実装のポイント

  • GridOptions
    • rowDragManaged:ドラッグの有効化
    • getRowNodeId:左右のグリッドでrowNodeIdが同じになるよう、一意の値を設定
  • ドロップゾーンの設定
    • 左右ぞれぞれのgridApiを使用し、相互にドロップゾーンを設定
    • ドラッグ&ドロップした際に、移動元のデータを削除する設定を追加
  • ドラッグ用のカラムを表示
    • カラム定義にて、1つ目をドラッグ用のカラムに設定
      ※rowDragTextは選択行数を表すように設定しています。選択行のデータを表示したりとカスタマイズが可能です。

注意点

通常、 gridOptions.pagination = true を設定することでページングが可能ですが、本機能との併用は不可のようでした。

▲一般的なグリッドはページング機能(赤枠部分)を付けることができます

おわりに

ag-Gridではグリッド間のドラッグ&ドロップが簡単に実装できることが分かりました。
この検証に伴い、コンテキストメニュー(右クリックメニュー)とショートカットキーのカスタマイズも行ったので、次回はその方法をご紹介したいと思います。