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

Prevent element reset to default position in hammerjs.github.io sample page (hammer js ver2.0.1 )

本文关键字：ver2 js 位置 默认 hammer hammerjs 元素 github io      更新时间：2023-09-26

从hammerjs.github.io网站上可以看到，无论何时你拖动、滑动、捏捏或旋转白色方块，它都会重置回默认位置。我已经试过了，但没能阻止这种行为，我不想让它重置回它的位置。我选择这个例子是因为它是唯一一个适合我在windows phone 8上运行的地图项目的例子。

我的做法是取消了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

这个库很棒，我希望我能在我的项目中实现它。谢谢你的帮助/建议。

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

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

function resetElementEnd() {
    startX = transform.translate.x;
    startY = transform.translate.y;
    el.className = 'animate';
    requestElementUpdate();
}

确保你已经完全创建了transform对象:在第88行，替换

var transform;

到

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

希望能有所帮助

相关文章：