まずはGSAPの導入方法から解説します。
導入方法はいくつかありますが、今回は2通りの方法をご紹介します。

1. CDNを利用する
   公式サイトから、「CDN」のタブを開き「Draggable」にチェックを入れます。
   ピンクで囲ったコードをコピーして任意の場所（</body>の手前など）に貼り付けてください。
   ※GSAP自体の導入もまだであれば、水色で囲ったコードも一緒に貼り付けてください。
   ※この時、水色のコードが上になるよう貼り付けないとエラーになりますのでご注意ください。
2. 直接ファイルをダウンロードする
   GitHubの、dist>Draggable.min.jsをダウンロードします。
   ダウンロードしたファイルは任意の場所に設置してください。
   GSAP自体の導入もまだであれば、dist>gsap.min.js も一緒にダウンロード、設置してください。
   

Draggable は、GSAPが提供しているプラグインのひとつで、HTML要素をドラッグ操作できる状態にするための機能です。

JavaScriptだけでドラッグ処理を一から実装しようとすると、マウスイベントやタッチイベントの制御、移動量の計算など、意外と手間がかかります。
Draggableを使えばそうした複雑な処理を意識することなく、シンプルなコードで直感的なドラッグ操作を実装できます。

Draggableでできること

• 要素をドラッグして移動させる
• 横方向・縦方向のみのドラッグ制御
• ドラッグで要素を回転させる
• 要素が別の要素と重なっているか検知できる

このように、UIパーツやインタラクション表現に欠かせない機能が揃っています。

また、GSAPの他の機能と組み合わせることで、ドラッグに合わせてアニメーションを再生したり、ドラッグ操作をトリガーにコンテンツを切り替えたりといった、よりリッチなUI表現も可能になります。
スライダー、カードの並べ替え、モーダル操作、ゲーム的な表現など、「ユーザーが触って操作できるUI」を作りたい場面で、Draggableは非常に強力なツールとなるでしょう。

まずは実際の動きを確認してみましょう！
こちらのボックスをドラッグして動かしてみてください。

▼実際の動き

▼基本的な書き方

このコードだけで、要素は自由にドラッグできるようになります。非常に簡単ですね。
type: "x,y" を指定することで、X軸・Y軸の両方向に移動可能です。
ここをxだけにすればX軸だけでの移動が、yにすればY軸の移動だけが可能になります。

回転させる

また、type: 'rotation'とすれば、ドラッグで回転させることが可能です。

▼回転させる例

さらに、Draggableにはスナップ（snap）機能があります。
スナップは、ドラッグした要素を「離した場所で止める」のではなく、「決められた場所で止める」ことができます。位置が曖昧だと使いづらいUIでは、このスナップ機能が便利です。

snapオプションの基本的な使い方

スナップは、liveSnapとして指定します。まずは、シンプルな例を見てみましょう。

▼実際の動き

▼基本的な書き方

この例では、ドラッグを離したときに X軸は0px / 100px / 200px / 300px のいずれかの位置にスナップされます。
ユーザーがどの位置で手を離しても、最終的には決められた位置に収まるため、操作感が安定し、UIとしての使いやすさが向上します。

回転も同様に設定可能です。

まずは、カードをドラッグできる簡単なサンプルを作ってみます。

シンプルなドラッグ例

このサンプルでは、

• 横方向にカードを動かせる
• 親要素の外には出ない

という最小限の挙動だけを実装しています。この時点で、「触れるUIであること」は十分に伝わります。
しかし、WebサイトでDraggableを使う場合、「カードを並べ替えること」自体が目的になることはほとんどありません。多くの場合、ドラッグ操作は次のような目的で使われます。

• ユーザーに「触れるコンテンツ」であることを伝える
• スクロール以外の操作体験を用意する
• アニメーションによってサイトの印象を強める

つまり、操作のためではなく、体験や演出のためのドラッグです。

では次に、ドラッグ可能なカードをWebサイトでどのように活かせるかを見ていきます。

ドラッグ操作を「演出」として使う

このサンプルでは、ドラッグ操作そのものがコンテンツ体験の一部になっています。カードを右へドラッグしてみてください。

ここで重要なのは、ドラッグ操作を操作UIではなく、体験・演出の一部として捉えることです。

例えば、画像をメインに見せたいセクションでは、画像を横並びに表示するだけでも情報としては成立します。しかし、「触って動かせる」「次の画像が自分のアクションで現れる」といった体験を加えることで、ユーザーは「見る」だけでなく「関わる」体験を得られます。

WebサイトでDraggableが活きる場面

Draggableは、次のような場面で使用すると面白いかと思います。

• ビジュアル（画像）をメインに見せたいセクション
• 遊び心のあるサイトで、触って楽しむコンテンツとして入れる（閲覧の邪魔にならない程度に）
• ブランドの世界観を伝えるストーリー型コンテンツ

こうしたページでは、ドラッグ操作を演出として使うことで、ユーザーの注目を自然に高めることができます。

Draggableは便利な反面、使いどころを誤るとWebサイトでは違和感が出やすくなります。
次のポイントを意識すると、自然に取り入れやすくなります。

• 操作を必須にしない
  ドラッグしなくても内容が伝わる設計にする。

• 動かしすぎない
  移動量は控えめにし、演出として使う。

• スクロールとの競合を避ける
  横方向のみ動かすなど、ページ操作を優先する。

• 見た目で「触ることができるもの」と伝える
  cursor: grab;にする、「動かしてみてね」など文章で伝えるなど、で操作可能だと分かる工夫をする。

前の章でもお伝えしましたが、Draggableは操作のためのUIではなく、体験を補強する演出として使うのがポイントです。

Draggable は、GSAPの中でも特にインタラクティブ性の高いプラグインです。
ドラッグ操作、スナップ、カードの並べ変えや移動など、幅広いUI表現を実装できます。

単に動かすだけでなく、「どのような操作がユーザーにとって自然か」「メイン要素の閲覧の邪魔にならないか」を意識することで、楽しい体験型サイトを作ることができます。

ぜひDraggableを活用し、サイト表現の幅をさらに広げてみてください！

【関連記事】

▼GSAPの導入方法や、アニメーションの作り方を知りたい方はこちら
GSAP入門編｜アニメーションの作り方を解説

▼GSAPの基礎や特徴、事例を知りたい方はこちら
GSAPの基礎と特徴を徹底解説｜事例から学ぶ活用法