インタラクティブなサイトを作る上で、画像やアイコン等をドラッグ出来るようにする要望は多々あるかと思います。
ひと昔前であれば、「mousedown」「mouseup」にイベントを設定して、対象項目のスタイルを制御して・・・
と、煩わしい処理を色々と記述する必要がありましたが、
jQuery UI を使用すれば、驚くほど簡単にドラッグ出来るようになります。
ドラッグ可能にする手順
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <head> <!-- jQueryとjQuery UIを読み込みます。 --> <script src="xxx/xxx/jquery/x.xxx.x/jquery.min.js"></script> <script src="xxx/xxx/jqueryui/x.xxx.x/jquery-ui.min.js"></script> <script> $(function() { // id「dragTarget」の要素をドラッグ可能に $("#dragTarget).draggable(); }); </script> </head> <body> <div id="dragTarget">これをドラッグ可能にしたい！！</div> </body> </html> |
- 「jQuery」と「jQuery UI」を読み込む。
- 対象とする要素にidを指定する。
- 対象とする要素に対して、jQueryUIの「draggable」関数を実行する。
たったのこれだけです。ライブラリの読み込み等を除けば、
9行目の「$(“#dragTarget).draggable();」の一文のみで
ドラッグが可能となります。
ドラッグ動作の調整
「draggable」の一文でドラッグ可能となりますが、
「縦にだけ動かしたい」
「横にだけ動かしたい」
「特定の枠内で動かしたい」
等々、動作の細かな調整はある程度オプション指定で実現できます。
「横にだけ動かしたい」場合は、「axis」オプションに「x」を指定します。$("#dragTarget").draggable({ axis: "x" });
「縦にだけ動かしたい」場合は、「axis」オプションに「y」を指定します。$("#dragTarget").draggable({ axis: "y" });
「特定の枠内で動かしたい」場合は、「containment」オプションで親要素を指定します。$("#dragTarget").draggable({ containment: "#parentItem" });
※その他オプションの詳細については公式サイトの「options」の部分を参照してください。
