iPhone/Android/PC 対応。jQuery で書くタッチイベント

jsdoit.html

<!-- jQuery を読み込んでおいてね -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<div id="hoge" style="position:absolute; cursor:move; z-index:1; border:1px solid #FFF; background-color: rgb(51, 51, 51);">
????<img src="http://blog.fenrir-inc.com/jp/images/fenrir_dev_blog.png" width="90" height="90">
    <p style="margin:0; font-size:10px; color:#FFF;" id="status">aaaa</p>
</div>

jsdoit.js

/* タッチできる環境なら true、そうでないなら false 。
???ここで先に判別しておきます。 */
var isTouch = ('ontouchstart' in window);
?
/* hoge のイベントを jQuery.bind で捕獲します。 */
$('#hoge').bind({
?????????????????
????/* タッチの開始、マウスボタンを押したとき */
????'touchstart mousedown': function(e) {
        // 表示テキスト
        $('#status').html('mousedown');
        
????????// ページが動いたり、反応を止める
????????e.preventDefault();
?????????
????????// 開始位置 X,Y 座標を覚えておく
????????// （touchmove イベントを通らず終了したときのために必ず覚えておくこと）
????????this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
????????this.pageY = (isTouch ? event.changedTouches[0].pageY : e.pageY);
?
????????// 現在の hoge の場所を覚えておく
????????this.left = $(this).position().left;
????????this.top = $(this).position().top;
?????????
????????// タッチ処理を開始したフラグをたてる
????????this.touched = true;
????},
????/* タッチしながら移動、マウスのドラッグ */
????'touchmove mousemove': function(e) {        
????????// 開始していない場合は動かないようにする
????????// 過剰動作の防止
????????if (!this.touched) {
????????????return;
????????}
????????
        // 表示テキスト
        $('#status').html('mousemove');
        
????????// ページが動くのを止める
????????e.preventDefault();
?????????
????????// 移動先の hoge の位置を取得する
????????this.left = this.left - (this.pageX - (isTouch ? event.changedTouches[0].pageX : e.pageX) );
????????this.top = this.top - (this.pageY - (isTouch ? event.changedTouches[0].pageY : e.pageY) );
?
????????// hoge を移動させる
????????$(this).css({left:this.left, top:this.top});
?????????
????????// 位置 X,Y 座標を覚えておく
????????this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
????????this.pageY = (isTouch ? event.changedTouches[0].pageY : e.pageY);
????},
????/* タッチの終了、マウスのドラッグの終了 */
????'touchend mouseup': function(e) {
????????if (!this.touched) {
????????????return;
????????}
????????// 表示テキスト
        $('#status').html('mouseup');
        
????????// タッチ処理は終了したため、フラグをたたむ
????????this.touched = false;
?????????
????????// 必要なら以下で最終の hoge の位置を取得し何かに使う
????????// this.pageX
????????// this.pageY
????}
});