javascript - 防止hammerjs.github.io示例页面中的元素重置为默认位置(hammer js ver2.0.1)

Question

正如您从 hammerjs.github.io 中看到的那样网站上，每当您拖动、滑动、捏合或旋转白色方 block 时，它都会重置回默认位置。我已尝试但未能阻止这种行为，我不希望它重置回原来的位置。我选择此示例是因为它是唯一适合我在 Windows Phone 8 上运行的 map 项目的示例。

我的做法是取消了onSwipe函数中的resetElementEnd()，我也取消了

mc.on("panstart rotatestart pinchstart", resetElementStart);
mc.on("panend rotateend pinchend pancancel rotatecancel pinchcancel", resetElementEnd);

但是每当我平移时，它都会在平移之前重置回默认位置，这似乎是许多问题的根源。我知道这与 startX 和 startY 有关，但我不太明白它们的用途。

var startX = Math.round((el.parentNode.offsetWidth - el.offsetWidth) / 2);
var startY = Math.round((el.parentNode.offsetHeight - el.offsetHeight) / 2);
...

function onPan(ev) {
    transform.translate = {
        x: startX + ev.deltaX,
        y: startY + ev.deltaY
    };
    requestElementUpdate();
}

这里是包含 html、css 和 js 文件的链接，基本上是 Hammerjs.github.io 示例的简化版本，index.js 文件是原始文件，modifiedIndex.js 是同一个文件，但带有我的取消我上面提到的一些行。 https://www.mediafire.com/?y7wvady7bhmyrs9

这个库非常棒，我希望我可以在我的项目中实现它。感谢您的任何帮助/建议。

Answer 1

你必须记住光标的最后位置。

在resetElementEnd()上，您将保存翻译X和Y

function resetElementEnd() {

    startX = transform.translate.x;
    startY = transform.translate.y;

    el.className = 'animate';
    requestElementUpdate();
}

确保您已完全创建转换对象:在第 88 行你替换

var transform;

进入

var transform = {
    translate: { x: startX, y: startY },
    scale: 1,
    rotate: 0
};

希望这有帮助