gpt4 book ai didi

javascript - 使用 Javascript 的 Tinder 风格拖放手势?

转载 作者:数据小太阳 更新时间:2023-10-29 04:25:36 24 4
gpt4 key购买 nike

我想弄清楚我可以使用哪些库来实现仅使用 Javascript 的 Tinder 风格的拖放手势。

  1. 需要创建响应拖动手势的 HTML 元素..
  2. 触摸并按住时,允许元素跟随用户的手指移动。
  3. 当用户移开他的手指时,该元素:

    动画回到原来的位置

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

我研究过 HammerJS,但似乎不支持拖放区。

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

最佳答案

我是 Swing 的作者:

A swipeable cards interface. The swipe-left/swipe-right for yes/no input. As seen in apps like Jelly and Tinder.

Swing

底层实现使用HammerJS处理拖动/触摸手势和 Rebound计算和操作 Spring 动力学(当您将卡片放入牌组时)。

当前的实现不实现拖放区。当前的实现依赖于 throwOutConfidence。默认情况下,当卡片被拖动超过其宽度的一半时,卡片将被视为从卡片组中取出。但是,您可以 overwrite throwOutConfidence in configuration中继自定义逻辑,例如你的卡片组离卡片有多近(专为放置卡片而设计的区域)。

有一个独立版本:

https://github.com/gajus/swing

和 Angular 版本:

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

关于javascript - 使用 Javascript 的 Tinder 风格拖放手势?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25718263/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com