タッチイベントを拾ってDraggableモドキ #jQuery

jQuery UIのDraggableだとiPhoneだとかのタッチデバイスでドラッグできない。
しょぼーん…

いろいろ調べてみたら、touchstart, touchmove, touchendってのでタッチイベントが拾えるらしい。

ということで書いてみた。

touchtest.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>touch test</title>
    <style type="text/css">
    .touchable {
        position: absolute;
        cursor: move;
        width: 100px;
        height: 100px;
        background-color: blue; }
    </style>
</head>
<body>
    <div class="touchable"></div>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

    <script>
    'use strict';

    $('.touchable').bind({
        'touchstart mousedown': function (e) {
            e.preventDefault();

            var eventPos = {};
            if (e.type == 'touchstart') {
                eventPos = {
                    x: e.originalEvent.changedTouches[0].pageX,
                    y: e.originalEvent.changedTouches[0].pageY
                };
            } else {
                eventPos = { x: e.pageX, y: e.pageY };
            }

            this.initialTouchPos = eventPos;
            this.initialDocPos = $(this).position();
            this.touching = true;
        },
        'touchmove mousemove': function (e) {
            if (!this.touching) return;
            e.preventDefault();

            var eventPos;
            if (e.type == 'touchmove') {
                eventPos = {
                    x: e.originalEvent.changedTouches[0].pageX,
                    y: e.originalEvent.changedTouches[0].pageY
                };
            } else {
                eventPos = { x: e.pageX, y: e.pageY };
            }

            var left = this.initialDocPos.left
                    + (eventPos.x - this.initialTouchPos.x);
            var top = this.initialDocPos.top
                    + (eventPos.y - this.initialTouchPos.y);

            $(this).css({ left: left, top: top });
        },
        'touchend mouseup': function (e) {
            if (!this.touching) return;
            this.touching = false;
            delete this.touching;
            delete this.initialTouchPos;
            delete this.initialDocPos;
        }
    });
    </script>
</body>
</html>

touchstart時点の座標を覚えておいて、touchmoveが発生毎に、開始時の座標との差分をターゲットドキュメントの座標に加えてあげるだけ。thisに勝手なプロパティ追加したので最後に一応お掃除deleteしてみました。（しなくてもいいのかな？良くわかんない）

タッチイベント発生時の座標は、e.originalEvent.changedTouches[0]から引っ張ってこないといけないみたい。