当在触摸设备上检测到触摸和拖动时，如何改变元素的宽度和元素? [英] How do I make the width of and element change when a touch and drag is detected on a touch device?

问题描述

我构建了一个滑块，该滑块可更改其宽度以将元素滑动到视图中.在桌面上，有一些按钮可以做到这一点.我希望能够使滑块通过触摸和拖动事件工作，并使它像iosslider一样平滑.我找到了一种可行的方法，但是它比较不稳定，而且并不总是响应.

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.

我的代码...

<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并仅加载了它的touch事件.

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

脚本检查虚拟鼠标的位置，然后在其移动时检查虚拟鼠标的向右或向左移动，然后从滑块上添加20px或减去20px.

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位置并相应地更改宽度.

What I had before was just not working so I started with a script that detected the x position of the mouse and change the width accordingly.

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.我还必须更改鼠标位置的侦听器.

But I also wanted to have it work on a touch device. So I bond the events to touchmove, touchstart and touchend. I also had to change the listener for the mouse position.

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

这使我能够获取触摸事件的当前位置.这项工作正常，但您必须点击，然后点击并拖动以使其正常工作.因此，在dom准备就绪后，我将事件侦听器绑定到元素本身.这样，每当有一个touchstart事件时，它都会找到该事件的位置.

This allow me to get the current position of the touch event. This worked ok but you had to tap and the tap and drag to get it to work. So I bond an event listener to the element itself, after the dom was ready. So that every time there was a touchstart event it would find the position of that event.

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

这非常有效，除了您必须将手指保持在一条直线上，否则屏幕会滚动".因此，当您在元素中时，我必须防止touchmove默认设置，而在停止时，则要防止重新启用"默认设置.

This worked perfectly except that you had to keep your finger on a straight line or else the screen would "scroll". So I had to prevent the touchmove defaults when you were in the element and the "re-enable" default when you stopped.

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

这篇关于当在触摸设备上检测到触摸和拖动时，如何改变元素的宽度和元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！