我怎么知道用户滑动的方向？

Question

我使用这个名为 Dragend https://github.com/Stereobit/dragend 的插件来实现触摸功能。我认为这使用了 Hammertime 的一些代码，如果你比 Dragend 更了解这个插件。

有 onDrag 或 onSwipeStart 和 onSwipeEnd 等选项来确定这些事件发生的情况。

但是我不知道如何查看我刚刚滑动的方向。即使你不知道这个插件，我也希望有人能帮助我。也许用一些 JQuery 检查 HTML/CSS 所做的更改 during/after 滑动？

Answer 1

查看插件 http://stereobit.github.io/dragend/demos/simple/。滑动是通过修改变换值发生的。如果我们从插件演示页面的示例代码中获取 html 的一部分。

<div id="swipeWrapper" style="overflow: hidden; width: 2500px; box-sizing: content-box; backface-visibility: hidden; perspective: 1000px; margin: 0px; padding: 0px; transform: translateX(-500px);"></div>

为了便于说明，让我们为包装添加一个 id div，并将其命名为 swipeWrapper。在您的 javascript 文件中。从 div.

读取转换值

var prevTransformValue = 0;//Initialize the value before you swipe; 
var swipeWrapper = document.getElementById('swipeWrapper');
var transformValue = swipeWrapper.style.transform;
var currentTransformValue =  transformValue.replace(/[^\d|^\-]/g,'');

示例中的 transformValue 是 "translateX(-500px)"； currentTransformValue = "-500";

现在比较 prevTransformValue > currentTransformValue 向左滑动方向和 prevTransformValue < currentTransformValueswipe 向右滑动方向。

注意：不要忘记设置prevTransformValue = currentTransformValue；获得方向值后。这个例子是如果你在水平方向滑动。

我怎么知道用户滑动的方向？

How can I know which direction the user swiped?

javascript

jquery

hammer.js

dragendjs