Tinder风格用Javascript拖动手势和拖放？ [英] Tinder style drag gesture and drop with Javascript?

问题描述

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

I'm trying to figure out what libraries I can use for a Tinder-style drag and drop gesture that only uses Javascript.

1. 需要创建一个响应拖动手势的HTML元素..


2. 触摸并保持时，允许元素跟随用户的手指。



3. 当用户移开他的手指时，该元素：

1. Needs to create an HTML element that responds to a drag gesture..
2. When touched and held, allows the element to follow the user's finger around.

3. When the user removes his finger, the element either:

动画回到其原始位置

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

if the element is over a specified drop zone when it is released, the element will animate and disappear and there needs to be some kind of event that triggers that contains which element was dropped and which drop zone it was dropped into

我看过HammerJS但似乎没有支持放弃区域。

I've looked into HammerJS but it doesn't seem like there is support for drop zones.

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

jQuery's Hover event doesn't seem to work for fingers.

推荐答案

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

My solution for this when I needed to support both desktop and mobile dragging event was to use touch-punch and Jquery-UI.

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

It maps the touch events (start/move/end) to the mouse events and for the basic jquery ui draggable features has worked really well. No extra code and i could use draggable and droppable as needed to do the drop, over and out functions.

对于jquery UI中拖放的一些示例，有一个看看
http://jqueryui.com/droppable/#revert
http://jqueryui.com/draggable/

For some examples of the drag and drop in jquery UI have a look at http://jqueryui.com/droppable/#revert http://jqueryui.com/draggable/

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

these will both work with touch events when including touch-punch on your page along with jquery-ui

与快速点击删除触摸事件中的300ms延迟并且拖动的滞后可以大大改善这里是一个例子（例子来自jquery-ui刚刚添加触摸打孔并快速点击） http://codepen.io/leighquince/pen/ztpCL

combine with fast-click to remove the 300ms delay in touch events and the lag of dragging can be greatly improved here is an example (example is from jquery-ui just added touch punch and fast click) 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!" );
      }
    });
  });

这篇关于Tinder风格用Javascript拖动手势和拖放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！