javascript - 使用hammer.js和jQuery向下和向上滑动元素以删除/删除元素？

Question

我正在尝试向上/向下滑动元素以将其删除。

我正在使用hammer.js 和jQuery。

到目前为止，我可以使用滑动删除元素left/right，效果很好。

但我需要使用 swipe 来实现完全相同的目标 up/down。

我在这里创建了这个工作示例：

https://codepen.io/anon/pen/YJPPyB

单击按钮，将出现一个元素，然后向左/向右滑动以将其删除。

使用上面的代码，我尝试了以下操作，但没有按预期工作：

$toast.animate({ top: event.deltaX, opacity: opacityPercent }, { duration: 50, queue: false, specialEasing: 'easeOutQuad' });

和

              $toast
                  .removeClass('panning')
                  .animate({ bottom: 0, opacity: 1 }, {
                      duration: 300,
                      specialEasing: 'easeOutExpo',
                      queue: false
                  });

有人可以就这个问题提出建议吗？

提前致谢。

编辑：

当我改变这个：

 hammerHandler.on('pan', function (event) {

对此：

hammerHandler.on('pandow', function (event) {

我可以在平移时移动元素，但我不知道为什么它非常不稳定！

这就是我现在向下滑动的方式，但有时会冻结整个页面，我不明白为什么！

 hammerHandler.on('pandown', function (event) {
      // Change toast state
      $toast.addClass('panning');

      var opacityPercent = 1 - Math.abs(event.deltaX / activationDistance);
      if (opacityPercent < 0)
          opacityPercent = 0;



      $toast.animate({ marginBottom: event.deltaX, opacity: opacityPercent }, { duration: 50, queue: false, specialEasing: 'easeOutQuad' });
  });

标签： javascriptjqueryhammer.js