LogoMark.png

jQuery/UI_Draggable のバックアップの現在との差分(No.2)


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


***HTML
#gistit(koichi-inoue/JQ_Draggable/blob/main/index.html,,400)

~

***CSS
#gistit(koichi-inoue/JQ_Draggable/blob/main/css/style.css,,400)
~

***JavaScript
#gistit(koichi-inoue/JQ_Draggable/blob/main/js/script.js,,400)

~
~

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

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

~
~
~