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;})
});

但我也想让它在触摸设备上运行。因此，我将事件与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>

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

1 个答案: