0

そこで、この小さなインタラクティブ ルーレットを作成しました。

http://techgoldmine.com/roulette/

デスクトップだけでなくモバイルでも動作する必要があります。もともと、画像に重なっている SVG 円をユーザーに操作させることで操作を処理していましたが、テスト目的でそれを削除しました。

モバイルではまだ機能せず、その理由がわかりません。ビューポートのメタ タグが正しく設定されているようです。

<meta name="viewport" content="width=device-width, target-densitydpi=high-dpi, initial-scale=1.0, user-scalable=no" />

マウス/指の位置を記録する:

 $(document).bind('mousemove', function (e) {
        xpos = e.pageX;
        ypos = e.pageY;
    });

    $(document).bind('touchmove', function (e) {
        xpos = e.pageX;
        ypos = e.pageY;
    });

マウスダウン/マウスアップ/タッチスタート/タッチエンド:

    //mouse
    $('.roulette').bind('mousedown', function () {
        if (inMotion == true) {
            cleanUp();
        }
        intervalvar = setInterval(spinWheel, 24);
        // spinWheel();
        $(document).bind('mouseup', function () {
            count = Math.abs(force)
            mouseup = 1;
        });
    });

    //touch
    $('.roulette').bind('touchstart', function () {
        if (inMotion == true) {
            cleanUp();
        }
        intervalvar = setInterval(spinWheel, 24);
        // spinWheel();
        $(document).bind('touchend', function () {
            count = Math.abs(force)
            mouseup = 1;
        });
    });

タッチでも動作する必要があります。何がうまくいかないのですか？

4

1 に答える 1

0

e.pageX から pageX を取得することはありません タッチ デバイスで pageX を取得するには、から取得します

//for javascript
e.touches[0].pageX
//for jquery
e.originalEvent.touches[0].pageX
于 2013-03-31T16:10:41.350 に答える