LogoMark.png

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


#author("2020-02-02T18:07:37+09:00;2019-12-25T13:59:02+09:00","default:inoue.ko","inoue.ko")
*UI Draggable
jQuery UI によるドラッガブルマップ [[DEMO>https://design.kyusan-u.ac.jp/SampleSite/JQ_Draggable/]]
#author("2021-06-03T15:25:06+09:00;2021-06-03T15:24:49+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
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Draggable</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/sample.js"></script>
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <h1>Draggable</h1>
    <div id=container>
      <div id="draggable" class="ui-widget-content">
        <span id="fukuoka" class="marker">
          <a href="http://example.com">
            <img src="images/pinMarker.png">
            FUKUOKA
          </a>
        </span>
        <span id="osaka" class="marker">
          <a href="http://example.com">
            <img src="images/pinMarker.png">
            OSAKA
          </a>
        </span>
    : id="tokyo" も同様
      </div>
    </div>
    <div id="controller">
      <button id="zoomIn"> + </button>
      <button id="zoomOut"> - </button>
    </div>
  </body>
  </html>
#gistit(koichi-inoue/JQ_Draggable/blob/main/index.html,,400)

~

***CSS
要点のみ記載しています。
  #container {
    /* フレームのサイズは自由 */
    width: 80%;
    height: 400px;
    border: 1px solid gray;
    margin: auto;
    overflow: hidden;
    background-color: rgb(154,206,255);
  }
 
  #draggable {
    position: relative;
    /* このサイズは背景画像のサイズと一致させる */
    width: 600px;
    height: 1200px;
    background-image: url(../images/map.png);
    /* 初期設定(自由) */
    transform: scale(0.8);
    margin: auto;
    margin-top: -420px;
  }
 
  .marker img{
    width: 32px;
  }
 
  #fukuoka {
    position: absolute;
    left: 80px;
    top: 670px;
  }
  
  :#osaka, #tokyo も同様
 
  #controller{
    margin: 40px;
    text-align: center;
  }
#gistit(koichi-inoue/JQ_Draggable/blob/main/css/style.css,,400)
~

***JavaScript'
 var sc="0.8";
 $( function() {
   $( "#draggable" ).draggable();
   $( "#zoomIn" ).click( function(){
     sc *= 1.1;
     $( "#draggable" ).css( {Transform: 'scale(' + sc + ')' } );
   });
   $( "#zoomOut" ).click( function(){
     sc /= 1.1;
     $( "#draggable" ).css( {Transform: 'scale(' + sc + ')' } );
   });
 } );
***JavaScript
#gistit(koichi-inoue/JQ_Draggable/blob/main/js/script.js,,400)

~
~

参考:マーカーのホバーでメッセージを出力 > [[DEMO2>https://design.kyusan-u.ac.jp/SampleSite/JQ_Draggable2/]]
**APPENDIX
以下、マーカー上をホバーすると、地名の文字列を出力する事例です。上記のサンプルと基本的には同じです。

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

~
~