如何在触摸设备上检测到触摸和拖动时更改宽度和元素更改？

Question

我有一个我建立的滑块，它改变了它的宽度以将元素滑动到视图中。在桌面上有按钮来做到这一点。我希望能够通过触摸和拖动事件来使滑块工作，并使它像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。

我该如何以更自然的感觉和流畅的方式做到这一点？

Answer 1

我之前所做的只是没有工作，所以我开始使用脚本来检测鼠标的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;}) 
}); 

但我也想让它在触摸设备上工作。所以我把这些事件联系起来，以触摸移动，触觉和触觉。我还必须更改鼠标位置的侦听器。

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

这让我获得触摸事件的当前位置。这工作正常，但你必须点击和水龙头，拖动它才能正常工作。所以我在dom准备好后将一个事件监听器绑定到元素本身。所以每次发生碰撞事件时都会发现该事件的位置。

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