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

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

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

    动画回到原来的位置

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

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

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

【问题讨论】:

    标签: javascript gestures


    【解决方案1】:

    当我需要同时支持桌面和移动拖动事件时,我的解决方案是使用touch-punchJquery-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】:

    【讨论】:

      【解决方案3】:

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

      jTinder Demo

      jTinder Source code 在 Github 上

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

      请在下方留下 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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2013-12-03
        • 2015-05-20
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多