1

幅を変更して要素をスライドさせて表示するスライダーを作成しました。デスクトップには、これを行うためのボタンがあります。スライダーをタッチ アンド ドラッグ イベントで動作させ、iosslider のように滑らかにしたいと考えています。機能する方法を見つけましたが、途切れ途切れで、常に応答するとは限りません。

私のコード...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">$(document).bind("mobileinit", function(){$.extend($.mobile , {autoInitializePage: false})});</script>
<script src="scripts/jquery.mobile-1.3.2.min.js"></script>
<script>
function clickNDrag(){

var mousePosition = event.pageX;
$(this).bind('vmousemove',function(){
    var mouseCurrentPosition = event.pageX;
    var positionNumber = mouseCurrentPosition - mousePosition;
    if(positionNumber > 0){
        var widthAppend = 20;
    } else {
        var widthAppend = -20;
    }
    $(this).css({width: '+=' + widthAppend});
});

$(this).vmouseup(function(){
        $(this).unbind('mousemove');
    });
$(this).vmouseleave(function(){
    $(this).unbind('mousemove');
});

}

$(document).ready(function(){
    $('.slider').bind('vmousedown',clickNDrag);
});
</script>

私が行ったことは、jQuery Mobile をロードし、そのタッチ イベントのみをロードしたことです。

スクリプトは、仮想マウスがどこにあるかを確認し、次にマウスが移動したときに右または左に移動したかどうかを確認し、スライダーから 20px を加算または 20px を減算します。

より自然な感じでスムーズな方法でこれを行うにはどうすればよいでしょうか?

4

1 に答える 1

2

以前は機能していなかったため、マウスの x 位置を検出し、それに応じて幅を変更するスクリプトから始めました。

var oldXPos = 0;
var isDragging = false;

$(document).mousemove(function(event) {
    if (isDragging)
    {
        var difference = event.pageX - oldXPos;
        $('#changeMe').css({width: '+='+ difference});

    }
    oldXPos = event.pageX;
    $('#changeMe').mousedown(function(){isDragging = true;})
    $('#changeMe').mouseup(function(){isDragging = false;})
});

しかし、タッチデバイスでも動作させたいと思っていました。そのため、イベントを touchmove、touchstart、および touchend に結合します。マウス位置のリスナーも変更する必要がありました。

     oldXPos = event.originalEvent.targetTouches[0].pageX;

これにより、タッチ イベントの現在の位置を取得できます。これは問題なく機能しましたが、機能させるにはタップしてタップしてドラッグする必要がありました。そのため、DOM の準備が整った後、イベント リスナーを要素自体に結合します。touchstart イベントが発生するたびに、そのイベントの位置を見つけるようにします。

$(document).ready(function(){
     $('#changeMe').bind('touchstart', function(event){
    oldXPos = event.originalEvent.targetTouches[0].pageX;
});
});

これは、指を直線上に置いておく必要があることを除いて、完全に機能しました。そうしないと、画面が「スクロール」します。そのため、要素内にいるときは touchmove のデフォルトを防止し、停止したときは「再有効化」のデフォルトを防止する必要がありました。 

$(document).ready(function(){
     $('#changeMe').bind('touchstart', function(event){
        oldXPos = event.originalEvent.targetTouches[0].pageX;
            $('body').bind('touchmove', function(e){e.preventDefault()});
     });
});

最終的なコード...

<style>
     .outer{width:500px; height:200px; overflow:hidden; }
     #changeMe {width:1000px; height: 200px;}
</style>

<div class="outer">
    <div id="changeMe">
        Some Content
    </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
    $(document).bind('touchmove' ,function(event) {
        if (isDragging)
        {
            var difference = event.originalEvent.targetTouches[0].pageX - oldXPos;
            $('#changeMe').css({width: '+='+ difference});
        }
        oldXPos = event.originalEvent.targetTouches[0].pageX;
        $('#changeMe').bind('touchstart', function(){isDragging = true;})
        $('#changeMe').bind('touchend', function(){isDragging = false;})
});

$(document).ready(function(){
     $('#changeMe').bind('touchstart', function(event){
        oldXPos = event.originalEvent.targetTouches[0].pageX;
            $('body').bind('touchmove', function(e){e.preventDefault()});
     });
});
</script>
于 2013-08-20T23:07:23.380 に答える