ReoGrid ReoGrid Web
move drag reorder rows lite v1.5

範囲・行・列の移動

選択範囲の枠をドラッグしてセルブロックを移動、選択済みの行・列ヘッダーをドラッグして行・列ごと並べ替え。キャンセル可能なonBeforeRangeMoveイベント(このデモではヘッダー行を固定)と1手のundoに対応。

デモの解説

このデモはスプリントのタスクボードを描画し、ドラッグでタスクを並べ替えられます — v1.5.0の新機能で、両エディションで利用できます。1つのジェスチャーに2つの操作があり、選択範囲の枠をドラッグするとセルブロックを移動(Excelと同じく移動先を上書き)、選択済みの行・列ヘッダーをドラッグすると切り取り+挿入で行・列ごと並べ替えます。

  • セルを選択し、選択範囲のをつかんで(カーソルが変わります)ドラッグ — 値・数式・スタイル・数値書式・罫線・コメントが一緒に移動します
  • 行ヘッダーをクリックして行を選択し、上下にドラッグして並べ替え — 何も上書きされません
  • ヘッダー行は固定:onBeforeRangeMoveが受け取るイベントにevent.cancel = trueを設定すると移動が抑止されます
  • onAfterRangeMoveが完了した移動をステータスバーに表示。undoで1手で元に戻せます
  • 「moveRange」ボタンはcanMoveRangeで確認してからプログラムでブロックを移動。チェックボックスはsetRangeMoveEnabled(false)でドラッグ操作だけを無効化します(APIは有効なまま)

主要 API

ws.range('A2:F3').moveTo(row, column)

セルブロックを左上が(row, column)に来るよう移動 — 移動先を上書きします

ws.moveRows(start, count, before)

切り取り+挿入で行ごと並べ替え。moveColumnsは列版です

ws.canMoveRange(range, row, column)

事前判定:{ ok } または { ok: false, reason }(結合セルの分断・範囲外・保護など)を返します

grid.onBeforeRangeMove(listener)

キャンセル可能なイベント — event.cancel = true で既定の移動を抑止します

grid.onAfterRangeMove(listener)

完了した移動でのみ発火。kind('range' | 'rows' | 'columns')・from・toを受け取ります

ws.setRangeMoveEnabled(false)

プログラマティックAPIはそのままに、ドラッグ操作だけを無効化します

ソースコード

TypeScript

関連ドキュメント

関連デモ

ニュースレター

開発の最新情報をお届けします

新しいリリース・機能追加・お知らせをいち早く受け取るには、
メーリングリストにご登録ください。