スポンサーサイト

一定期間更新がないため広告を表示しています

| - | | - | - |
iPhone用のwebアプリ作成:touch
JUGEMテーマ:iphone


iPhone用のwebアプリを作るべくちょこちょこと勉強をはじめした。

kei-tai.orgさんにわかりやすいエントリーがあって参考にさせていただきました。
ke-tai.org > Blog Archive > 90秒で理解するiPhone JavaScript(ジェスチャー編)
ke-tai.org > Blog Archive > 90秒で理解するiPhone JavaScript(マルチタッチ編)

あと英語ですが、こちらの記事もとてもわかりやすいですし、ソースを見るとよく理解できます。
SitePen Blog » Touching and Gesturing on the iPhone

ということで、初歩的な最小限のtouchのソースを書いてみました。
touch


window.addEventListener( "load", addTouch, false );

function addTouch() {
 var nodes=document.getElementsByTagName("div");
 for (var i = 0; i < nodes.length; i++) {
  nodes[i].ontouchmove=function(e){
   e.preventDefault();
   var tc=e.touches[0];
   var tgt = tc.target;
   tgt.style.position = "absolute";
   tgt.style.left = tc.pageX + "px";
   tgt.style.top = tc.pageY + "px";
  }
 }
}

最小限ですが、これだけでDIV要素をドラッグできます。
タッチイベントについてはkei-tai.orgさんのページに詳しく書かれているので、そちらご参考にしていください。
ただこれだと要素に対してtouchした位置がずれてしまいますので、要素のtouchした位置と指のtouchした位置を常にくっつけるようにします。あと重なり順を変更して、touchした要素を常に一番手前にします。
touch

window.addEventListener( "load", addTouch, false );

function addTouch() {
 var nodes=document.getElementsByTagName("div");

 var pX;
 var pY;
 var zIndexDepth=1;

 for (var i = 0; i < nodes.length; i++) {
  nodes[i].ontouchstart=function(e){
   e.preventDefault();
   var tc=e.touches[0];
   var tgt = tc.target;
   tgt.style.position = "absolute";
   tgt.style.zIndex=zIndexDepth++;
   pX=tc.pageX-tgt.offsetLeft;
   pY=tc.pageY-tgt.offsetTop;
  }

  nodes[i].ontouchmove=function(e){
   e.preventDefault();
   var tc=e.touches[0];
   var tgt = tc.target;
   tgt.style.left = tc.pageX - pX +"px";
   tgt.style.top = tc.pageY - pY +"px";
  }
 }
}
pX,pYがtouchstartで要素の座標とtouchした地点の座標の差で、zIndexDepthに要素のzIndexを格納します。
これでそれっぽく動きます。ただこれだとマルチタッチで複数の要素を一緒に動かすことができません。次回はマルチタッチで複数の要素を動かすようにします。
| iphone | 10:48 | comments(0) | trackbacks(0) |
スポンサーサイト
| - | 10:48 | - | - |
コメント
コメントする









この記事のトラックバックURL
http://4creaters.jugem.jp/trackback/126
トラックバック