jQuery UIのsortableを使ってリストをドラッグで並び替える

jQuery UIのsortableを使って、リストをドラッグで並び替えをし、並び順を書き換えてからSQLで送信します。

sortableのサンプル
sortableで並べ替えができるリストの作成
sortableを指定するJavaScript
ドラッグ中にカーソルを変えるcss
現在の並び順を取得する
移動した並び順を書き換える
移動した並び順からSQLを作成する

js関連記事

sortableのサンプル

See the Pen
Untitled by むぅ (@mugenweb)
on CodePen.0

sortableで並べ替えができるリストの作成

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<ul id="sort">
  <li>動かせる項目1</li>
  <li>動かせる項目2</li>
  <li>動かせる項目3</li>
</ul>

jQueryを読み込んでから、jQuery UIを読み込みます。
もし動かない場合は読み込む順番が間違ってないか確認しましょう！

動かしたい要素の親要素にid="sort"を指定しています。
セレクタはなんでも大丈夫ですが、今回はidを使用しています。

sortableを指定するJavaScript

JavaScript

$(function () {
  $("#sort").sortable();
});

HTMLで指定したセレクタを指定し、sortable()とするだけでドラッグできるようになります。

ドラッグ中にカーソルを変えるcss

css

.ui-sortable-handle {
  cursor: grab;
}

.ui-sortable-handle:active {
  cursor: grabbing;
}

sortable()を使うとドラッグできる要素にui-sortable-handleクラスが追加されるので、cssでカーソルを指定しておくとドラッグできる要素だと視覚的に「ドラッグできる要素なんだ」と認識してもらいやすくなります。

現在の並び順を取得する

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<ul id="sort">
  <li id="1">動かせる項目1</li>
  <li id="2">動かせる項目2</li>
  <li id="3">動かせる項目3</li>
</ul>

JavaScript

$(function () {
  $("#sort").sortable({
    update: function () {
      $("#log").text($('#sort').sortable("toArray"));
    }
  });
});

先程のコードを少し変更します。
JavaScriptのtoArrayの指定では、ドラッグ対象の要素のidを元に取得するので、事前にドラッグ対象の要素全てにidを設定する必要があります。
この場合はliにはidを振ります。

移動した並び順を書き換える

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<ul id="sort">
  <li id="1">動かせる項目1 <input type="text" class="seq" value="1" name="seq[1]"></li>
  <li id="2">動かせる項目2 <input type="text" class="seq" value="2" name="seq[2]"></li>
  <li id="3">動かせる項目3 <input type="text" class="seq" value="3" name="seq[3]"></li>
</ul>

JavaScript

$(function () {
  $("#sort").sortable({
    update: function () {
      $("#log").text($('#sort').sortable("toArray"));
      var i = 1;
      $(".seq").each(function () {
        var seq = $(this).val(i);
        i++;
      });
    }
  });
});

先程のコードを少し変更します。
今回はドラッグが完了したタイミングで、inputタグに現在の並び順を反映させます。
inputタグには、クラスseqを指定してあり、それらを順番にインクリメントした値で書き換えます。
こうすることで、ユーザーが実際に並び替えたい順番を取得することができます。

ここまでできたら、これをSQLに反映させるだけです。

移動した並び順からSQLを作成する

PHP

foreach ($_POST['seq'] as $key => $val) {
  $strSql = 'UPDATE table_name SET seq = :seq WHERE id = :id';
  $params = [
    ':id' => $key,
    ':seq' => $val,
  ];
  $result = $obj->insert($strSql, $params);
}

前回のコードで、入力値が自動で反映されるようになったので、formで送信することでUPDATE処理を行います。
inputタグにname="seq[1]"をしてるので、送信されたデータからSQLを作成します。

あとはforeachで添え字からidを、値から並び順を取得し、UPDATEするだけです。
ただこれはバリデーションをしていないし、送信されたデータごとにUPDATE文を投げているので項目数が多い場合は対策が必要です。