【jQuery UI】sortableで並び替え+表示順更新

はじめに

jQuery UIのsortableを使用して項目を入れ替え、
その後表示順を更新する機能を作成しました。

読み込むもの

<!-- jQuery -->
<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>

<!-- jQuery UI -->
<script
  src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"
  integrity="sha256-xH4q8N0pEzrZMaRmd7gQVcTZiFei+HfRTBPJ1OGXC0k="
  crossorigin="anonymous"></script>

最新のリンクはこちらから↓
https://releases.jquery.com/

sortableにする

親要素に対してsortable()を付与するだけで、ドラッグアンドドロップで
順番を変えることができます！簡単！

<script>
  $(function(){
    $('#sortable').sortable();
  });
</script>

<div id="sortable">
  <div>
    項目1
  </div>
  <div>
    項目2
  </div>
  <div>
    項目3
  </div>
</div>

表示順を変える

sortableで順番を変えたものを保存するために、
順番変えたあとに表示順を更新する機能を追加させます。

まずインプット要素のhiddenタイプで順番を持たせます。
そしてsortableが終了したらその順番を更新させる
というロジックを実装します。

<script>
  $(function(){
    $('#sortable').sortable();
    $('#sortable').bind("sortstop", function(){
      $(this).find('[name="display_order"]').each(function(idx){
        $(this).val(idx + 1);
      })
    })
  });
</script>

<div id="sortable">
  <div>
    <input type="hidden" name="display_order" value="0">
    項目1
  </div>
  <div>
    <input type="hidden" name="display_order" value="1">
    項目2
  </div>
  <div>
    <input type="hidden" name="display_order" value="2">
    項目3
  </div>
</div>

sortstopをトリガーとして、name属性で指定しvalue値を更新してます。

他のイベントをトリガーとしたい場合はこちらのイベントタブに一覧あります↓
https://js.studio-kingdom.com/jqueryui/interactions/sortable