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 并且只加载了它的触摸事件。

该脚本检查虚拟鼠标的位置，然后在移动时检查它是向右还是向左移动，然后从滑块中添加 20 像素或减去 20 像素。

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

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