我怎么用javascript / jquery两个手指拖动？ [英] How would I do a two finger drag with javascript/jquery?

问题描述

我已经将div绑定到了touchstart和touchmove事件。我只是不知道如何写的功能。

像如果event.originalEvent.targetTouches.length => 2 设置开始X和Y.

我平均两个手指位置？然后应用css变换与数据？如何从DOM的流中拉出它，静态定位？

任何例子都会很棒，谢谢！

解决方案

在CoffeeScript中，我还编辑它以使用全局变量进行泛化。我不使用全局变量。

  $（'＃div'）。bind'touchstart'，touchstart 
 $（'＃div'）。 bind'touchmove'，touchmove 
 
 touchstart：（event）=> 
 if event.originalEvent.touches.length> = 2 
 
x = 0 
y = 0 
 
在event.originalEvent.touches $ b中触摸$ bx + = touch.screenX 
y + = touch.screenY 
 
 window.startx = x / event.originalEvent.touches.length 
 window.starty = y / event.originalEvent .touches.length 
 
 touchmove：（event）=> 
 if event.originalEvent.touches.length> = 2 
 
x = 0 
y = 0 
 
在event.originalEvent.touches $ b中触摸$ bx + = touch.screenX 
y + = touch.screenY 
 
 movex =（x / event.originalEvent.touches.length） -  @startx 
 movey =（y / event .originalEvent.touches.length） -  @starty 
 
 newx = $（'＃div'）。offset（）。left + movex 
 newy = $（'＃div'）。offset （）.top + movey 
 
 $（'＃div'）。offset（{top：newy，left：newx}）
 
 window.startx = x / event。 originalEvent.touches.length 
 window.starty = y / event.originalEvent.touches.length 
  

I'm trying to create the ability to drag a div when there are two fingers placed on it.

I've bound the div to the touchstart and touchmove events. I'm just not sure how to write the functions.

Something like if event.originalEvent.targetTouches.length => 2 set starting X and Y.

Do I average the two fingers positions? Then apply css transforms with the data? How do I pull it out of the flow of the DOM, static positioning?

Any examples would be great, thanks!

解决方案

In CoffeeScript, I also edited it to use globals for the purpose of generalizing. I'm not using global variables.

    $('#div').bind 'touchstart', touchstart
    $('#div').bind 'touchmove', touchmove

    touchstart: (event) =>
        if event.originalEvent.touches.length >= 2

            x = 0
            y = 0

            for touch in event.originalEvent.touches
                x += touch.screenX
                y += touch.screenY

            window.startx = x/event.originalEvent.touches.length
            window.starty = y/event.originalEvent.touches.length

    touchmove: (event) =>
        if event.originalEvent.touches.length >= 2

            x = 0
            y = 0

            for touch in event.originalEvent.touches
                x += touch.screenX
                y += touch.screenY

            movex = (x/event.originalEvent.touches.length) - @startx
            movey = (y/event.originalEvent.touches.length) - @starty

            newx = $('#div').offset().left + movex
            newy = $('#div').offset().top + movey

            $('#div').offset({top: newy, left: newx})

            window.startx = x/event.originalEvent.touches.length
            window.starty = y/event.originalEvent.touches.length

这篇关于我怎么用javascript / jquery两个手指拖动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！