javascript - 如何根据 Hammer.js pan 设置 translateX 的样式？

Question

我想在用户使用 Hammer.js 平移元素时translateX() 元素。当用户向左拖动内容时，我想向左翻译内容。右边也一样。

当前代码:

var manager = new Hammer.Manager(elem);

var panner = new Hammer.Pan({ direction: Hammer.DIRECTION_HORIZONTAL, threshold: 0 });

manager.add(panner);

manager.on("panleft", function(e) {
    elem.style.transform = "translateX(" + (e.distance * -1) + "px)";
});

manager.on("panright", function(e) {
    elem.style.transform = "translateX(" + e.distance + "px)";
});

它可以工作，除非用户向左平移然后向右返回，它会出现故障并变为负数。我怎样才能让它发挥作用？

Answer 1

我通过绑定(bind)到 panmove 事件并使用 e.deltaX 属性解决了这个问题:

manager.on("panmove", function(e) {
   elem.style.transform = "translateX(" + e.deltaX + "px)";
});