🚀 新規事業

inline-reorder

最終更新 2026年05月09日 / 40_新規事業/SCALE_Build/カタログ/機能集/inline-reorder.md

インライン並び替え(↑↓ボタン)

用途

配列要素を上下ボタンで並び替え。D&Dより安心・ミス少ない。

特徴

  • ↑↓ ボタン
  • 一発実装
  • 配列インデックス操作
  • モバイル安心

コード(コピペ用)

function reorder(arr, fromIdx, direction) {
  const toIdx = direction === 'up' ? fromIdx - 1 : fromIdx + 1;
  if (toIdx < 0 || toIdx >= arr.length) return arr;
  const next = [...arr];
  [next[fromIdx], next[toIdx]] = [next[toIdx], next[fromIdx]];
  return next;
}

// 使い方:
// const items = PD('items', []);
// const newOrder = reorder(items, 3, 'up');  // index 3 を上へ
// setPD('items', newOrder);

// HTML:
// <button onclick="moveUp(idx)">↑</button>
// <button onclick="moveDown(idx)">↓</button>

使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

注意事項

  • 依存パッケージを忘れず追加