ReoGrid ReoGrid Web

範囲・行・列の移動

v1.5.0 から、選択範囲を Excel と同じようにドラッグして移動できます。同じ操作系に、性質の異なる 2 つの操作があります。

操作内容挙動
選択範囲のをドラッグセルブロックの移動移動先を上書き
選択済みの行・列ヘッダーをドラッグ行・列の並べ替え切り取り+挿入 — 何も失われません

両エディションで利用可能です — 移動はオートフィルや切り取り/貼り付けと同じ基本編集機能という位置づけです。

一緒に移動するもの

セル単位で保持されている情報がすべて移動します。

値/数式テキスト、リッチテキスト、数値書式、スタイル、セルタイプ、罫線、コメント、ロック状態。

Note: 移動したセルを参照している数式は v1 では書き換えられません — 既存の切り取り/貼り付けと同じ挙動です。また行・列の並べ替えでは、条件付き書式・入力規則・テーブル・改ページ・アウトライン・フィルターの範囲は追従しません。

ドラッグ操作

  • 選択範囲の(内側 ±3px の帯)をつかむと、カーソルが移動カーソルに変わり、プレビュー矩形がポインタに追従します。離すとドロップします。
  • 右下隅のフィルハンドルが枠より優先されるため、オートフィルには影響しません。
  • 選択済みの行・列ヘッダーを押した場合、4px 動かすまで並べ替えは開始されません。単純なクリックは従来どおり選択になります。

API に触れずに操作自体を無効化できます。

grid.worksheet.setRangeMoveEnabled(false)

プログラムからの移動

const ws = grid.worksheet

// ブロックの移動 — 左上が (row, column) に来ます。移動先は上書きされます
ws.range('A1:C3').moveTo(10, 0)

// ワークシート上で矩形を明示することもできます
ws.moveRange({ topRow: 0, leftColumn: 0, bottomRow: 2, rightColumn: 2 }, 10, 0)

// 行・列の並べ替え(切り取り+挿入)
ws.moveRows(2, 3, 8)      // インデックス 2 から 3 行 → インデックス 8 の手前へ
ws.moveColumns(1, 1, 4)   // インデックス 1 の 1 列 → インデックス 4 の手前へ

いずれも移動が実行された場合に true を返します。事前に判定するには次を使います。

const check = ws.canMoveRange({ topRow: 0, leftColumn: 0, bottomRow: 2, rightColumn: 2 }, 10, 0)
if (!check.ok) console.warn(check.reason)

行・列版は canMoveRows / canMoveColumns です。

移動が拒否される条件

次の場合、移動はブロックされます。

  • 結合セルを分断する(一部だけを移動する)
  • シート範囲外に出る
  • 保護されたシートのロックされたセルに掛かる
  • 遅延ロードデータソースが接続されている

イベント

onBeforeRangeMoveキャンセル可能です。リスナーは書き換え可能なイベントを受け取り、cancel = true を設定すると既定の移動が抑制されるため、ホスト側で独自の処理を実装できます。.NET 版 ReoGrid の BeforeCopyOrMoveRangeEventArgs.IsCancelled に対応します(リスナーの戻り値は参照されません)。

const off = grid.onBeforeRangeMove((event) => {
  if (event.kind === 'rows' && event.from.topRow === 0) {
    event.cancel = true            // ヘッダー行を固定する
  }
})

grid.onAfterRangeMove((info) => {
  console.log(`${info.kind} を移動`, info.from, '→', info.to)
})
  • ブロックされた移動でも onBeforeRangeMove は発火し、cancel は既に trueblockedReason'merge-source' / 'merge-target' / 'out-of-bounds' / 'protected' / 'data-source' / 'no-op')が入るので理由を提示できます。フラグを下ろしても移動は実行されません。
  • onAfterRangeMove移動が完了したときのみ発火します。
  • undo / redo ではどちらのイベントも発火しません — 移動を直接再実行します。

いずれもアクティブシートに追従するため、シート切り替え後もそのまま機能します。戻り値は購読解除の関数です。

undo

移動は 1 件の undo エントリになります。ブロック移動は移動元と移動先の矩形をスナップショットし、行・列の並べ替えは逆順列を保持するためスナップショットを必要としません。

関連

  • 選択とイベント — 選択は移動したブロックに追従します。
  • オートフィル — フィルハンドルは移動用の枠より優先されます。
  • クリップボード — 切り取り/貼り付けによるデータ移動。
  • 行と列 — 挿入/削除。並べ替えではなくデータのシフトになります。
ニュースレター

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

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