自動チェックインアプリ(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’を選択してスポットをドラッグ＆ドロップ

・タグを’Shopping’に変更してスポットを追加