jQuery/UI_Draggable

jQuery UI Draggable

jQuery UI によるドラッガブルマップ

jQuery UI はインタラクティブなWebサイトを開発するために使用される、jQueryをベースにしたJavaScriptのライブラリで、Draggable 機能を用いると、地図画像をドラッグして動かすなど、要素に対するドラッグ機能が実現します。

• 公式サイト：https://jqueryui.com/
  
  

• DEMO：https://koichi-inoue.github.io/JQ_Draggable/
• CODE：https://github.com/koichi-inoue/JQ_Draggable
  
  

準備

• 1）ファイルセットのダウンロード
  https://jqueryui.com/　からDLして下さい。
  必要なのは jquery-ui.min.js のみです。

• 2） 構成ファイルの確認
  • index.html （動作確認用）
  • css（フォルダ）/　jquery-ui.min.css　style.css
  • js （フォルダ）/　jquery-xxxxx.min.js　jquery-ui.min.js　sample.js
  • images（フォルダ）/　map.png　pinMarker.png

• 3) index.html、style.css,、sample.jsの３つについて、それぞれ以下のソースをコピー＆ペーストしてお試しください。

APPENDIX

以下、マーカー上をホバーすると、地名の文字列を出力する事例です。上記のサンプルと基本的には同じです。

• DEMO：https://koichi-inoue.github.io/JQ_Draggable2/
• CODE：https://github.com/koichi-inoue/JQ_Draggable2