Question

我正在开发一个网页应用，我想使用hammer.js创建“向右滑动删除”效果。

现在，这个效果并不是真正的“滑动”，但我认为它更像是一个拖动权利删除，因为这是我在手机上使用任何应用程序时的印象。无论如何，作为概念的证明，我尝试使用这个hammer.js例子：

HTML

<ol>
<li style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none;">Swipe right to delete →
<li style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none;">Swipe right to delete →
</ol>

JS：

var test = {};
test.prepareForTouches = function () {

    function dragElement(event) {
        var elementToDrag = event.target;
        elementToDrag.style.left = event.gesture.deltaX + 'px';
    };

    function deleteElement(event) {
        var elementToDelete = event.target;
        event.gesture.stopDetect();
        elementToDelete.style.display = 'none';
    };

    function resetElement(event) {
        var elementToReset = event.target;
        elementToReset.style.left = 0;
    };

    var swipeOptions = {dragLockToAxis: true, dragBlockHorizontal: true};

    function initTouchListeners(touchableElement) {
        var touchControl = new Hammer(touchableElement, swipeOptions);
        touchControl.on("dragright", dragElement)
                .on("swiperight", deleteElement)
                .on("release", resetElement);
    };

    var listItems = document.querySelectorAll('li');
    for (var i = 0; i < listItems.length; i += 1) {
        initTouchListeners(listItems[i]);
    }
}
test.prepareForTouchesWhenReady = function () {
    document.addEventListener("DOMContentLoaded", test.prepareForTouches);
};
test.prepareForTouchesWhenReady();

它正在运行，你可以在这里看到：http://codepen.io/anon/pen/OyMQVQ

我遇到的唯一问题是，我想使用hammer.js v2 ，而不是上面示例中使用的 v1 。在新版本上，它会像使用拖动事件一样接缝，这就是我的问题。我可以使用什么来创建类似于上面显示的效果？

提前谢谢。

Hammer.js - 向右滑动删除？

0 个答案: