Question

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

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

动画回到原来的位置

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

我已经研究过HammerJS，但似乎并不支持掉落区。

jQuery的悬停事件似乎对手指无效。

Answer 1

jTinder 似乎与您正在寻找的非常接近。此页面上的其他评论大多是在jTinder上市之前编写的。

jTinder Demo

Github上的

jTinder Source code

其他密切相关的问题： Swiping through photo stack like Tinder - Cross-platform (Hybrid / HTML5 is OK)

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

Answer 2

我是Swing的作者：

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

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

当前的实现没有实现拖放区。当前的实现依赖于<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="#" method="post" id="myForm"> Title: <input id="titlenewtide" type="text" name="title" required> <br>Description: <textarea name="description" id="description"></textarea> <br>Tag: <input id="newtag" type="text" name="newtag" required> <br>Category: <input type="radio" name="category" value="19" required>Animation <button type="submit" value="Submit" name="subnewtide" id="subnewtide" disabled="disabled">Submit</button> </form>。默认情况下，当卡被拖动超过其宽度的一半时，卡被认为是在牌组之外。但是，您可以overwrite throwOutConfidence in configuration继续使用自定义逻辑，例如卡片附近的卡片卡（设计用于放下卡片的区域）。

有一个独立版本：

https://github.com/gajus/swing

和角度版本：

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

Answer 3

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

它将触摸事件（开始/移动/结束）映射到鼠标事件，对于基本的jquery，ui可拖动功能已经很好地工作了。没有额外的代码，我可以根据需要使用draggable和droppable来执行drop，over和out函数。

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

这些都适用于触摸事件，当您在页面上包含触摸打孔以及jquery-ui时

与fast-click结合以消除触摸事件中300ms的延迟，并且可以大大改善拖动的延迟，这是一个示例（例如来自jquery-ui刚刚添加了触控和快速点击）{{3} }

//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!" );
      }
    });
  });

Answer 4

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

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

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

4 个答案: