Tinder风格用Javascript拖动手势和拖放？

Question

我正在试图弄清楚我可以使用什么库来进行仅使用Javascript的Tinder风格的拖放手势.

1. 需要创建一个响应拖动手势的HTML元素..
2. 触摸并按住时,允许元素跟随用户的手指.

3. 当用户移开他的手指时,元素要么:

   动画回到原来的位置

   如果元素在释放时位于指定的放置区域上,则该元素将生成动画并消失,并且需要某种触发事件包含哪个元素被删除以及哪个放置区域被放入

我已经研究过HammerJS,但似乎并不支持掉落区域.

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

Answer 1

jTinder似乎非常接近你正在寻找的东西.此页面上的其他评论大多是在jTinder可用之前编写的.

jTinder演示

jTinder Github上的源代码

其他密切相关的问题: 像Tinder一样通过照片堆栈轻扫 - 跨平台(混合/ HTML5可以)

请在下面留下关于您使用jTinder的体验以及各种设备的响应速度的评论.

Answer 2

我是Swing的作者:

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

底层实现是使用HammerJS来处理拖动/触摸手势和反弹以计算和操作弹簧动态(当您将卡放入卡座时).

当前实现不实现拖放区.目前的实施依赖于throwOutConfidence.默认情况下,当卡被拖动超过其宽度的一半时,卡被认为是在牌组之外.但是,您可以在配置中覆盖throwOutConfidence以在自定义逻辑上进行中继,例如,卡是否在您的卡片组附近(设计用于丢弃卡的区域).

有一个独立版本:

https://github.com/gajus/swing

和角度版本:

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

Answer 3

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

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

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

当您的页面上包含 touch-punch 和 jquery-ui 时，这些都可以处理触摸事件

与快速点击相结合，消除触摸事件中的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!" );
      }
    });
  });