Alpine.jsでドラッグ操作による並び替えを実現する方法（Sort Plugin）

こんにちは。エキサイトでデザイナーをしている齋藤です。

今回はAlpine.jsの公式プラグインを使用して、ドラッグ操作による並び替えを実現する方法をご紹介します。

使用するプラグインについて
実装方法
並び替えの情報を取得する方法
さいごに

使用するプラグインについて

Alpine.jsでドラッグ操作による並び替えを実現するためには、公式に提供されているSort Pluginを使用します。

Alpine.js本体と同様にscriptタグを使用してCDNから読み込むことが可能です。（npmも使用できます）

その際、Alpine.js本体を読み込むscriptタグの前に記述する必要がありますのでご注意ください。

<!-- Alpine.js本体を読み込むscriptより前に記述する -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/sort@3.14.1/dist/cdn.min.js"></script>

実装方法

まずは基本形をお示しします。

ぜひCodePenに触れてみてください。

See the Pen Untitled by AyumuSaito (@ayumusaito-excite) on CodePen.

<div x-data>
  <ul x-sort>
    <li x-sort:item>アイテム1</li>
    <li x-sort:item>アイテム2</li>
    <li x-sort:item>アイテム3</li>
  </ul> 
</div>

並び替えを適用したいアイテム群のラッパーにx-sortディレクティブを、個々のアイテムはx-sort:itemディレクティブを付与すると、ドラッグ操作による並び替えが可能になります。

並び替えの情報を取得する方法

x-sort:itemにIDを振ると、x-sort内でアイテムIDは$item、並び順は$position（始まりは0番目）で取得できます。

※CodePen内でアイテムを動かすと、ブラウザのアラートダイアログで動かしたアイテムのIDと並び順が確認できます。

See the Pen Alpine.jsのSort Pluginで並び替えを実現（ハンドラー） by AyumuSaito (@ayumusaito-excite) on CodePen.

<div x-data>
  <ul x-sort="alert('アイテム' + $item + 'を' + $position + '番目に移動しました')">
    <li x-sort:item="1">アイテム1</li>
    <li x-sort:item="2">アイテム2</li>
    <li x-sort:item="3">アイテム3</li>
  </ul> 
</div>

以下のようにすると、x-data内でも並び替えられたアイテムのIDと並び順を扱うことができます。

<div x-data="{ handle: (item, position) => {alert('アイテム' + item + 'を' + position + '番目に移動しました')} }">
  <ul x-sort="handle">
    <li x-sort:item="1">アイテム1</li>
    <li x-sort:item="2">アイテム2</li>
    <li x-sort:item="3">アイテム3</li>
  </ul> 
</div>