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