触摸时平移元素 - jQuery

Question

我正在尝试在触摸时平移元素，我使用以下方法来计算用户滑动的距离（并在滑动初始化后添加转换/功能）我如何获得滑动的实时值并为 DIV 制作动画跟着手指走？

我使用以下代码来实现滑动功能：

独立 jQuery“触摸”方法？< /a>

Answer 1

您需要对脚本进行一些分解才能实现您需要的功能。基本上你所拥有的是将“滑动”保存到单个事件，你需要捕获类似这样的 touchMove 事件：

//add to the decleration:
var defaults = {
    threshold: {
        x: 30,
        y: 10
    },
    swipeLeft: function() { alert('swiped left') },
    swipeRight: function() { alert('swiped right') },
    //THIS:
    swipeMove: function(distance) { alert('swiped moved: '+distance.x+' horizontally and '+distance.y+' vertically') },
    preventDefaultEvents: true
};

//add this to the init vars section
var lastpoint = {x:0, y:0}

//add an init to the lastpoint at start of swipe
function touchStart(event) {
        console.log('Starting swipe gesture...')
        originalCoord.x = lastpoint.x = event.targetTouches[0].pageX
        originalCoord.y = lastpoint.y = event.targetTouches[0].pageY
    }

//this is where you do your calculation
function touchMove(event) {
        if (defaults.preventDefaultEvents)
            event.preventDefault();

        var difference = {
            x:event.targetTouches[0].pageX - lastpoint.x,
            y:event.targetTouches[0].pageY - lastpoint.y
        }
        //call the function
        defaults.swipeMove(difference);

        finalCoord.x = lastpoint.x = event.targetTouches[0].pageX 
        finalCoord.y = lastpoint.y = event.targetTouches[0].pageY
    }

无论如何应该是类似的东西，但还没有测试它。