如何让我的宽度和元素的变化，当触摸屏设备上检测到触摸和拖拽？(How do I make the w

I have a slider that I built that changes the width of it to slide the element into view. On a desktop there are buttons to do this. I want to be able to make the slider work with a touch and drag event and for it to be smooth like iosslider. I have found a way that works but it is choppy and does not always respond.

My code...

<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>

What I have done is I loaded jQuery Mobile and only loaded the touch events of it.

The script checks to see where the virtual mouse is and then when it moves checks to see if it moved right or left and then adds 20px or subtracts 20px from the slider.

How would I do this in a more natural feeling and smooth way?

于是我开始与检测到鼠标的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>