在HTML5/JQueryMobile/PhoneGap中添加滑动支持

我正在做一个PhoneGap项目，我们希望用户能够从列表中删除项目

JQueryMobile有.swipleft（）和.swiperight（）的事件，但这些都是布尔事件；他们要么开枪，要么不开枪

我们想得到“花式”，当用户刷卡时，我们将物品越来越红。一旦它达到某个临界点，它将在剩下的过程中滑动并逐渐消失。然后我们将使用.slideUp（）关闭其容器div，从而消除空空间。或者，用户可以放开物品，物品将滑回原位，在滑回原位时变为白色

从概念上讲，我知道如何制作动画，但是否有某种形式的.swipeStart（）/.swipeMove（）/.swipened（）功能可以用于报告用户已刷了多远？如果是这样，我可以匹配项目的偏移量和颜色，以反映用户从原点滑动的距离

任何线索将不胜感激

范例 工作示例：

代码 Javascript代码：

var gnStartX = 0;
var gnStartY = 0;
var gnEndX = 0;
var gnEndY = 0;

$(document).on('vmousedown', function(event){
    gnStartX = event.pageX;
    gnStartY = event.pageY;
    event.preventDefault();
});

$(document).on('vmouseup', function(event){
    gnEndX = event.pageX;
    gnEndY = event.pageY;  
    var distance = Math.ceil(nthroot(Math.pow((gnEndX - gnStartX),2) + Math.pow((gnEndY - gnStartY),2), 2));

    if(Math.abs(gnEndX - gnStartX) > Math.abs(gnEndY - gnStartY)) {
        if(gnEndX > gnStartX) {
            alert("Swipe Right - Distance " + distance + 'px');
        } else {
            alert("Swipe Left - Distance " + distance + 'px');     
        }
    } else {
        if(gnEndY > gnStartY) {
            alert("Swipe Bottom - Distance " + distance + 'px');  
        } else {
            alert("Swipe Top - Distance " + distance + 'px');      
        }        
    }  
    
    event.preventDefault();      
});

function nthroot(x, n) {
  try {
    var negate = n % 2 == 1 && x < 0;
    if(negate)
      x = -x;
    var possible = Math.pow(x, 1 / n);
    n = Math.pow(possible, n);
    if(Math.abs(x - n) < 1 && (x > 0 == n > 0))
      return negate ? -possible : possible;
  } catch(e){}
}

var gnStartX=0；
var-gnStartY=0；
var-gnEndX=0；
var-gnEndY=0；
$（文档）.on（'vmousedown'，函数（事件）{
gnStartX=event.pageX；
gnStartY=event.pageY；
event.preventDefault（）；
});
$（文档）.on（'vmouseup'，函数（事件）{
gnEndX=event.pageX；
gnEndY=event.pageY；
变量距离=Math.ceil（nthroot（Math.pow（（gnEndX-gnStartX），2）+Math.pow（（gnEndY-gnStartY，2），2））；
if（Math.abs（gnEndX-gnStartX）>Math.abs（gnEndY-gnStartY））{
如果（gnEndX>gnStartX）{
警报（“向右滑动-距离”+距离+像素”）；
}否则{
警报（“向左滑动-距离”+距离+像素”）；
}
}否则{
如果（gnEndY>gnStartY）{
警报（“滑动底部-距离”+距离+像素”）；
}否则{
警报（“滑动顶部-距离”+距离+像素”）；
}        
}  
event.preventDefault（）；
});
函数根（x，n）{
试一试{
var negate=n%2==1&&x<0；
如果（否定）
x=-x；
可能变量=数学功率（x，1/n）；
n=数学功率（可能，n）；
if（Math.abs（x-n）<1&（x>0==n>0））
返回否定？-可能：可能；
}捕获（e）{}
}

---

这是我的例子，将给你方向和距离。使用的事件是

vmousedown

和

vmouseup

。它们是jQuery移动事件，用于连接桌面和移动浏览器之间的触摸事件，基本上它可以在任何平台上工作。如果您只想使用移动平台，请更改

vmousedown

->

touchstart

和

vmouseup

->

，这几乎完美！但是，有没有什么方法可以让它在您刷卡时报告进度？现在，它似乎只有在你停止刷卡时才会开火。例如，您可以在刷卡时将左边距设置为与刷卡距离相等吗？太棒了！我稍微调整了一下，让它更接近我的意思。但是我现在明白了-谢谢你的例子！还有一个更新：我对其进行了调整，使其更接近我的目标：。现在我只需要让它动画回到左边距：一旦用户放开，0px。