LogoMark.png

jQuery/UI_Draggable の変更点


#author("2021-09-25T11:38:43+09:00;2021-09-25T11:37:52+09:00","default:inoue.ko","inoue.ko")
*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の3つについて、それぞれ以下のソースをコピー&ペーストしてお試しください。

~
~

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

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

~
~
~