これで簡単に実装できる！ カードやパネルをドラッグアンドドロップで移動できるレイアウトに変換するスクリプト -Swapy
Post on:2024年9月26日
sponsors
数行のコードを記述するだけで、カードやパネルをドラッグアンドドロップで移動できるレイアウトに変換するJavaScriptを紹介します。
他のフレームワークやライブラリへの依存はありません。また、ReactやVueやSvelteなどと一緒に使用することもできます。
Swapyの特徴
Swapyは、フレームワークやライブラリに依存することなく、わずか数行のコードであらゆるレイアウトをドラッグして移動できるレイアウトに変換するためのJavaScriptツールです。
MITライセンスで、個人でも商用でも無料で利用できます。
Swapyのデモ
Swapyのドラッグできるレイアウトは、下記ページで楽しめます。
Swapyの使い方
お気に入りのパッケージマネージャーを使用してインストールできます。
|
1 |
pnpm install swapy |
また、外部JavaScriptとしてCDN経由で利用できます。
|
1 2 3 4 |
<script src="https://unpkg.com/swapy/dist/swapy.min.js"></script> <script> const swapy = Swapy.createSwapy(container) </script> |
シンプルなレイアウトを例に、使い方を見てみましょう。
まずは、HTMLで3つのコンテンツを用意します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="container"> <div class="section-1" data-swapy-slot="foo"> <div class="content-a" data-swapy-item="a"> <!-- コンテンツを配置 --> </div> </div> <div class="section-2" data-swapy-slot="bar"> <div class="content-b" data-swapy-item="b"> <!-- コンテンツを配置 --> <div class="handle" data-swapy-handle></div> </div> </div> <div class="section-3" data-swapy-slot="baz"> <div class="content-c" data-swapy-item="c"> <!-- コンテンツを配置 --> </div> </div> </div> |
まずは、ドラッグさせる要素（以下、スロット）にdata-swapy-slot属性を付与し任意の名前を与えます。各スロットには1つのアイテムを含めることができます。
Swapyはデフォルトで、アイテムはどこからでもドラッグ可能です。また、data-swapy-handle属性を持つ要素を追加することで、ハンドルを設定できます（上記ではsection-2に追加）。
これでHTMLの準備は完了したので、JavaScriptを設定します。
|
1 2 3 4 5 6 7 8 9 10 |
import { createSwapy } from 'swapy' const container = document.querySelector('.container') const swapy = createSwapy(container, { animation: 'dynamic' // or spring or none }) // いつでも無効にしたり有効にしたりできます swapy.enable(true) |
スロットとアイテムを含むコンテナ要素を取得し、createSwapy()に渡します。デフォルトではdynamicのアニメーションが適用されます。アニメーションの種類はオプションで変更できます。
スワップイベントをリッスンすることで、新しい順番を保存することもできます。より便利にするために、スワップイベントは新しい順番の3つのバージョン（map, object, array）を返します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import { createSwapy } from 'swapy' const container = document.querySelector('.container') const swapy = createSwapy(container) swapy.onSwap((event) => { console.log(event.data.object); console.log(event.data.array); console.log(event.data.map); // event.data.object: // { // 'foo': 'a', // 'bar': 'b', // 'baz': 'c' // } // event.data.array: // [ // { slot: 'foo', item: 'a' }, // { slot: 'bar', item: 'b' }, // { slot: 'baz', item: 'c' } // ] // event.data.map: // Map(3) { // 'foo' => 'a', // 'bar' => 'b', // 'baz' => 'c' // } }) |
Swapyは、フレームワークと一緒にも使用できます。リポジトリから例を確認してください。
sponsors
