Tinder 风格的拖放手势和使用 Javascript 的拖放？答案

【问题标题】：Tinder style drag gesture and drop with Javascript?Tinder 风格的拖放手势和使用 Javascript 的拖放？
【发布时间】：2014-11-01 07:39:09
【问题描述】：

我正在尝试找出哪些库可以用于仅使用 Javascript 的 Tinder 风格的拖放手势。

需要创建一个响应拖动手势的 HTML 元素..
当触摸并按住时，允许元素跟随用户的手指。
当用户移开手指时，元素：

动画回到原来的位置

如果元素在被释放时超过了指定的放置区域，则该元素将动画并消失，并且需要触发某种事件，其中包含哪个元素被放置以及它被放置到了哪个放置区域

我研究了 HammerJS，但似乎不支持拖放区。

jQuery 的 Hover 事件似乎不适用于手指。

【问题讨论】：

标签： javascript gestures

【解决方案1】：

当我需要同时支持桌面和移动拖动事件时，我的解决方案是使用touch-punch 和Jquery-UI。

它将触摸事件（开始/移动/结束）映射到鼠标事件，并且对于基本的 jquery ui 可拖动功能非常有效。没有额外的代码，我可以根据需要使用 draggable 和 droppable 来执行 drop、over 和 out 功能。

有关 jquery UI 中拖放的一些示例，请查看 http://jqueryui.com/droppable/#revert http://jqueryui.com/draggable/

当在您的页面上包含 touch-punch 和 jquery-ui 时，这些都适用于触摸事件

结合fast-click来消除触摸事件的300ms延迟和拖动的延迟可以大大改善这里是一个例子（例子来自jquery-ui刚刚添加了触摸打孔和快速点击）http://codepen.io/leighquince/pen/ztpCL

//normal setup from jquery ui
$(function() {
    $( "#draggable" ).draggable({ revert: "valid" });
    $( "#draggable2" ).draggable({ revert: "invalid" });

    $( "#droppable" ).droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  });

【讨论】：

谢谢！我检查了触摸打孔页面，在我的 S4 上拖动框有很大的延迟。这是使用 JS 做拖动手势的固有特性吗？
在我的 HTC-one 上使用它，如果我的手指移动得非常快，它必须赶上我的手指，而不是像它紧紧地锁在桌面上的鼠标上一样。在我们的产品中，我们不介意手指滞后，在大多数情况下，在正常拖动速度下，它相当紧，这意味着我们不必在触摸或鼠标这两种情况之间做任何特别的事情。我想滞后来自将触摸事件转换为模拟鼠标事件？？？但不确定。
你试过Hammer吗？他们页面上的框拖动似乎比触摸打孔更加流畅且不那么滞后。想知道它是否可以与 jQuery UI 的 droppable 东西集成。 hammerjs.github.io
是的，我记得看着它，它本身真的很酷，但从我读到的所有内容来看，它与 jquery-ui 并没有很好的配合。只是快速搜索了一下，看看上面是否有任何新内容，发现这个github.com/hammerjs/hammer.js/issues/54，坚持忽略，只是再次阅读它的标题，那是锤子和触摸拳一起工作，早上的眼睛还没有醒来。
啊刚刚看到这个github.com/ngryman/jquery.finger，这让我想起了移动设备有 300 毫秒的延迟，我想知道这是否有助于解决延迟

【解决方案2】：

查看 Swing JS： https://github.com/gajus/swing

对于角度： https://github.com/gajus/angular-swing

【讨论】：

【解决方案3】：

jTinder 似乎与您要查找的内容非常接近。此页面上的其他 cmets 大多是在 jTinder 可用之前编写的。

jTinder Demo

jTinder Source code 在 Github 上

请在下方留下 cmets 您对 jTinder 的体验以及对各种设备的响应速度。

【讨论】：

如何在 jTinder 参考中撤消滑动？

【解决方案4】：

我是Swing的作者：

可刷卡界面。是/否输入的向左/向右滑动。正如在 Jelly 和 Tinder 等应用中所见。

底层实现是使用HammerJS 处理拖动/触摸手势，使用Rebound 计算和操作弹簧动力学（当您将卡片放入牌组时）。

当前的实现没有实现拖放区。当前的实现依赖于throwOutConfidence。默认情况下，当卡片被拖出超过其宽度的一半时，卡片被视为离开牌组。但是，您可以overwrite throwOutConfidence in configuration 中继自定义逻辑，例如你的卡片组离卡片有多近（设计用于丢弃卡片的区域）。

有一个独立版本：

https://github.com/gajus/swing

和角度版本：

https://github.com/gajus/angular-swing

【讨论】：