これで簡単に実装できる！カードやパネルをドラッグアンドドロップで移動できるレイアウトに変換するスクリプト -Swapy

サイト構築 -JavaScript

Post on:2024年9月26日

sponsorsr

数行のコードを記述するだけで、カードやパネルをドラッグアンドドロップで移動できるレイアウトに変換するJavaScriptを紹介します。

他のフレームワークやライブラリへの依存はありません。また、ReactやVueやSvelteなどと一緒に使用することもできます。

カードやパネルをドラッグアンドドロップで移動できるレイアウトに変換するスクリプト -Swapy

Swapy
Swapy -GitHub

Swapyの特徴
Swapyのデモ
Swapyの使い方

Swapyの特徴

Swapyは、フレームワークやライブラリに依存することなく、わずか数行のコードであらゆるレイアウトをドラッグして移動できるレイアウトに変換するためのJavaScriptツールです。

MITライセンスで、個人でも商用でも無料で利用できます。

Swapy

Swapyのデモ

Swapyのドラッグできるレイアウトは、下記ページで楽しめます。

Swapy

Swapyの使い方

お気に入りのパッケージマネージャーを使用してインストールできます。

pnpm install swapy

1	pnpm install swapy

また、外部JavaScriptとしてCDN経由で利用できます。

<script src="https://unpkg.com/swapy/dist/swapy.min.js"></script>
<script>
  const swapy = Swapy.createSwapy(container)
</script>

const swapy = Swapy.createSwapy(container)

</script>

シンプルなレイアウトを例に、使い方を見てみましょう。
まずは、HTMLで3つのコンテンツを用意します。

<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>

</div>

</div>

</div>

まずは、ドラッグさせる要素（以下、スロット）にdata-swapy-slot属性を付与し任意の名前を与えます。各スロットには1つのアイテムを含めることができます。

Swapyはデフォルトで、アイテムはどこからでもドラッグ可能です。また、data-swapy-handle属性を持つ要素を追加することで、ハンドルを設定できます（上記ではsection-2に追加）。

これでHTMLの準備は完了したので、JavaScriptを設定します。

import { createSwapy } from 'swapy'

const container = document.querySelector('.container')

const swapy = createSwapy(container, {
  animation: 'dynamic' // or spring or none
})

// いつでも無効にしたり有効にしたりできます
swapy.enable(true)

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）を返します。

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'
  // }
})