Hammer.js - 向右滑动删除?

时间:2015-09-15 09:21:39

标签: javascript hammer.js gestures

我正在开发一个网页应用,我想使用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 。在新版本上,它会像使用拖动事件一样接缝,这就是我的问题。我可以使用什么来创建类似于上面显示的效果?

提前谢谢。

0 个答案:

没有答案
相关问题