要件？

言葉にできない…。

よくあるD&Dのあれ！あれがやりたいの！(貧弱な語彙

SortableJS/Vue.Draggable: Vue component allowing drag-and-drop sorting in sync with View-Model. Based on Sortable.js

左端のリストだけでしている操作のやつ！

0から始まるindexの値を持つ要素集合の配列がある。¹
あるindex(移動元)から新しい(すでにある)index(移動先)へ移動する処理を行いたい。
今、移動先にある要素は、移動した要素により押し出される。
押し出される方向は上下どちらでもありうる。移動元がどこだったかによる。
その他の要素も、連動して押し出される。
indexの値は全体を通して変動するものの、max・minが変わることはなく、値が重複することもない。

移動元と移動先のindexは手に入っている状態からスタート

もう要素のindex値でなくて配列自体の数字添字を使ってもいい。
この画像のコードがあればよかったのに。

コード


const arr = [
  {
    index : 0,
    value : 'Q'
  },
  {
    index : 1,
    value : 'i'
  },
  {
    index : 2,
    value : 'i'
  },
  {
    index : 3,
    value : 't'
  },
];



function insert(oldIndex, newIndex) {
  if (oldIndex == newIndex) {
    return;
  }

  // 押出処理に巻き込まれないうちに移動元を記憶
  const oldElementIndex =  arr.findIndex((element, index) => {
    return element.index == oldIndex;
  });

  // 移動によるずれを実行
  arr.forEach((element) => {
    if (
      oldIndex      <  newIndex &&

      oldIndex      <= element.index && 
      element.index <= newIndex) {
      element.index -= 1;
    } else if(
      newIndex      <= element.index && 
      element.index <= oldIndex) {
      element.index += 1;
    }
  });

  // 空いた移動先へ移動
  arr[oldElementIndex].index = newIndex;
};

insert(0,3);

めちゃくちゃ効率悪い気がするし、不具合ありそうだし、何かのソートで代用できそうだし、こんなのわざわざ新規で作る必要なくデフォかライブラリで各言語用意されていると思うんだけど調べる頭が全然足らなくてググり力が足りない。

タイトルすらまともなものが浮かばない。

書いてて気づいた要素削除したときに詰め直すの面倒だから連番にはならない(しない)と思う。 ↩

それでいいのかインサート

要件？

コード