自動チェックインアプリ(4) – チェックイン予定表の作成

前記事に引き続いて、チェックイン予定表を作成する。

  • ドロップ可能にする
  • 右のクリップ済スポットのテーブル(#tblClipSpot)から予定表のテーブル(#tblPlanSpot)にスポット名をドラッグ&ドロップできるようにする。tblPlanSpotを初期化したタイミングでドロップ可能にしたいところだが、tblPlanSpotテーブルはユーザの操作で行が追加されることがあるため、行が追加されるごとに以下の処理を実行する。

    // JavaScript
    function handleDrop(){
      $('#tblPlanSpot1 td.drop').droppable({
        onDragEnter: function(){ // ドラッグしている要素がドロップ可能な領域に入った
          $(this).addClass('over'); // 背景色を黄色にする
          //$(source).cursor = 'pointer';
        },
        onDragLeave: function(){ // ドラッグしている要素がドロップ可能な領域を出た
          $(this).removeClass('over'); // 背景色を元に戻す
        },
        onDrop: function(e, source){
          $(this).removeClass('over');      
          if ($(source).hasClass('assigned')) { // 右テーブルからドラッグしてきたとき 
             $(this).append(source); // ドラッグ要素をtd要素に追加
          } else { // すでに左テーブルにある要素をドラッグしたとき
             // (1)ドラッグ要素をコピーし(2)assignedクラスを設定
             var c = $(source).clone().addClass('assigned');
             // (3)ドラッグ要素をtd要素に追加
             $(this).empty().append(c);
             c.draggable({
                revert: true
             });
             drawPlanMarker(source); // マーカーを地図に表示
          }
        }
     });
    }
    
  • ドロップ時に地図マーカーを表示する:drawPlanMarker()
  • // JavaScript
    function drawPlanMarker(source){
      var spot_key = $(source).find('p:eq(0)').text(); // ドロップした内容からkeyを取り出す
      var spot_name = $(source).find('p:eq(1)').text(); // 使わない
      // keyからspotを取り出す
      var spot = getSpotByKey(gDSspotClip.getData(), spot_key);
      gSpotPlanBuf.push(spot); // save時に使うのでspotを保持しておく
      // アイコンを指定してマーカーを表示する  
      var marker = displaySpotOnMap(spot,
        '/images/icon/mm_20_purple.png','/images/icon/mm_20_shadow.png');
      gMarkerPlanSpot.push(marker); // あとでマーカーをクリアできるように保持しておく
    }
    
  • マーカー表示時にアニメーション効果を与える
  • マーカーを生成するときに、animationオプションを設定することで、アニメーションをつけることができる。標準では「DROP」(上から落ちてくる)と「BOUNCE」が用意されている。

    function displaySpotOnMap(spot, icon, icon_shadow){
        var pos = new google.maps.LatLng(spot.spot_lat, spot.spot_lng);
        var marker = new google.maps.Marker({
            position: pos,
            icon: icon,
            shadow : icon_shadow,
            animation: google.maps.Animation.DROP,
            map: gMap
        });
        return marker;
    }
    
  • 実行例
  • ・タグ’Food’を選択してスポットをドラッグ&ドロップ
    xlocplan03_c01
    ・タグを’Shopping’に変更してスポットを追加
    xlocplan03_c02

カテゴリー: Development, Location Service タグ: , , パーマリンク

自動チェックインアプリ(4) – チェックイン予定表の作成 への1件のフィードバック

  1. ピンバック: 自動チェックインアプリ - チェックイン予定表の保存 | Try Lifelog

コメントは停止中です。