【Draggabilly】HTML要素をドラッグアンドドロップできるJavaScriptライブラリ

Draggabillyとは？
要素を追加
ライブラリを読み込み
要素を選択してDraggabillyをインスタンス化する
まとめ

Draggabillyとは？

Draggabillyは、HTML要素をドラッグ可能にするためのJavaScriptライブラリです。指定したHTML要素をマウスやタッチ操作でドラッグできるようにします。

以下はDraggabillyの基本的な使い方の例です。

要素を追加

ページのHTMLに<div>要素を追加します。この要素がドラッグ可能になります。

<div class="draggable-element">ここをドラッグしてください</div>

ライブラリを読み込み

Draggabillyのライブラリを読み込みます。既に記述されている場合はスキップできます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/draggabilly/2.3.0/draggabilly.pkgd.min.js"></script>

要素を選択してDraggabillyをインスタンス化する

ドラッグ可能な要素を選択して、Draggabillyをインスタンス化します。

[rml_read_more]

<script>
  // ドラッグ可能な要素を選択
  const draggableElement = document.querySelector('.draggable-element');

  // Draggabillyをインスタンス化
  const draggie = new Draggabilly(draggableElement);
</script>

これで、指定した要素がドラッグ可能になります。ユーザーはその要素をクリックしてドラッグし、マウスやタッチを離すと要素はドロップされます。

HTML要素をドラッグアンドドロップできるようになりました。

まとめ

これは最小限の例です。Draggabillyは様々なカスタマイズオプションを提供しています。

例えば、ドラッグの制約、ドラッグ開始/終了時のイベントハンドリング、グリッドスナップ、コンテナ内でのドラッグなどをカスタマイズすることができます。

公式ドキュメントに詳細な情報が記載されているので、そちらを参照することをおすすめします。以下のリンク先に公式ドキュメントがあります。

Draggabilly

必要に応じて、公式ドキュメントを参照してカスタマイズや詳細な使い方を確認してください。