ドラッグ&ドロップ機能の実装に時間がかかって困っていませんか？
Webアプリケーションの中で、項目を並び替えたいというニーズはよくあります。その際には、一つずつ選ぶのではなく、項目をドラッグ&ドロップで操作できるとユーザビリティが向上します。フロントエンドフレームワークの中にはそうした機能をサポートするものもあります。
今回は、フレームワークに依存せずに利用できるSwapyというライブラリを紹介します。Swapyは、DOMのドラッグ&ドロップを簡単に実現できるライブラリで、手軽に利用できます。
この記事の内容
Swapyの基本的な使い方（JavaScript/React対応）
JavaScriptでドラッグ&ドロップを簡単に実装したい方に最適なSwapyの使い方を解説します。
Swapyは、npmまたはscriptタグを書いて利用できます。
npm install swapy
または、CDNを利用する場合は以下のようにscriptタグを追加します。
<script src="https://unpkg.com/swapy/dist/swapy.min.js"></script>
<script>
// 初期化
const swapy = Swapy.createSwapy(container)
</script>
container は、操作対象のDOMです。Swapyはスロットとアイテムという組み合わせで操作を行います。各スロットは1つのアイテムしか持てません。
<div class="container">
<!-- スロット A -->
<div data-swapy-slot="a">
<!-- アイテム A -->
<div data-swapy-item="a">
<div>A</div>
</div>
</div>
<!-- スロット B -->
<div data-swapy-slot="b">
<!-- アイテム B -->
<div data-swapy-item="b">
<div>B</div>
</div>
</div>
<!-- スロット C -->
<div data-swapy-slot="c">
<!-- アイテム C -->
<div data-swapy-item="c">
<div>C</div>
</div>
</div>
</div>
このようなHTML構造の場合、以下のように初期化します。
document.addEventListener("DOMContentLoaded", function() {
const swapy = Swapy.createSwapy(document.querySelector(".container"))
});
これで、スロットとアイテムのドラッグ&ドロップが可能になります。
ドラッグ&ドロップ後のデータ取得方法
ドラッグ&ドロップ操作後に並び順を保存する方法は主に2つあります。
並び替えを行っても、それをデータに保存しておかないと再読込したら元に戻ってしまいます。そこで、Swapyからデータを取得し、保存する必要があります。
データの取得方法は2つあり、まず全部まとめて取得する方法です。これは、保存ボタンなどを使う場合に便利です。
const currentSlotItemMap = swapy.slotItemMap()
console.log(currentSlotItemMap.asObject)
// {
// 'foo': 'a',
// 'bar': 'b',
// 'baz': 'c'
// }
console.log(currentSlotItemMap.asArray)
// [
// { slot: 'foo', item: 'a' },
// { slot: 'bar', item: 'b' },
// { slot: 'baz', item: 'c' }
// ]
console.log(currentSlotItemMap.asMap)
// Map(3) {
// 'foo' => 'a',
// 'bar' => 'b',
// 'baz' => 'c'
// }
もう1つはイベントを使う方法です。これは並び替え完了時に呼ばれるので、リアルタイムでデータを取得・保存できます。
swapy.onSwap((event) => {
console.log(event.newSlotItemMap.asObject)
// {
// 'foo': 'a',
// 'bar': 'b',
// 'baz': 'c'
// }
console.log(event.newSlotItemMap.asArray)
// [
// { slot: 'foo', item: 'a' },
// { slot: 'bar', item: 'b' },
// { slot: 'baz', item: 'c' }
// ]
console.log(event.newSlotItemMap.asMap)
// Map(3) {
// 'foo' => 'a',
// 'bar' => 'b',
// 'baz' => 'c'
// }
console.log(event.fromSlot)
// 'foo'
console.log(event.toSlot)
// 'bar'
console.log(event.draggingItem)
// 'b'
console.log(event.swappedWithItem)
// 'a'
})
Swapy活用テクニック集
実際の開発で役立つSwapyの便利機能をご紹介します。
ハンドル部分を作る
デフォルトでは、アイテム全体をドラッグできますが、特定の部分だけをドラッグ可能にすることもできます。これには、data-swapy-handle 属性を使います。
<div data-swapy-item="foo">
<!-- This div is now the handle -->
<div data-swapy-handle></div>
<!-- Item content... -->
</div>
ドラッグできない部分を作る
逆に、ドラッグできない領域を指定することもできます。これは data-swapy-no-drag を指定します。
<div data-swapy-item="foo">
<div data-swapy-no-drag></div>
<button data-swapy-no-drag></button>
<!-- Item content... -->
</div>
ドロップした際のアニメーションを変更する
ドロップした際のアニメーションは、初期化時に変更できます。
createSwapy(container, {
animation: 'dynamic' // または spring、none
})
初期化時にはドロップさせない
初期化時にドロップを無効にすることもできます。
createSwapy(container, {
enabled: false
})
有効無効を切り替える際には swapy.enable(true || false) を実行してください。
水平、垂直のみのドラッグ&ドロップ
横並びや、縦に並んだアイテムだけを入れ替える場合には dragAxis オプションを指定します。
createSwapy(container, {
dragAxis: 'x' // または 'y'
})
Swapyまとめ：次のステップ
今回は、DOMの並び替えを自在に行うライブラリSwapyの使い方を紹介しました。Swapyは軽量で使いやすく、React、Vue、Svelteなど主要フレームワークすべてに対応しているため、どのようなプロジェクトでも安心して導入できます。
Swapyは、シンプルなAPIでDOMのドラッグ&ドロップを実現できるので、手軽に導入できます。項目の並びをユーザーに指定してもらう際などに活用できるでしょう。
素のJavaScriptはもちろん、React/Vue/Svelteなどでも利用できるので、ぜひ試してみてください。
次のステップ
- 公式ドキュメント（https://swapy.tahazsh.com/）で詳細な設定を確認
- GitHubで最新のアップデート情報をチェック
- 実際のプロジェクトで試してみる
ドラッグ&ドロップ機能でユーザビリティ向上を目指しましょう！
Swapy – Easy Drag-to-Swap Solution
よくある質問
Q: モバイルでも使えますか？
A: はい、タッチ操作にも対応しています。
Q: TypeScriptで使えますか？
A: はい、型定義も提供されています。
Q: 商用利用は可能ですか？
A: オープンソースライブラリなので商用利用可能です。
Q: 他のドラッグ&ドロップライブラリとの違いは？
A: Swapyは軽量でフレームワーク依存がなく、シンプルなAPIが特徴です。
Q: React/Vueでの具体的な実装例はありますか？
A: 公式サイトの例やGitHubリポジトリで各フレームワークのサンプルが提供されています。