如何使用javascript / jquery进行双指拖动?

时间:2011-10-28 08:01:14

标签: javascript jquery iphone css ios

我正在尝试创建在有两个手指放在上面时拖动div的功能。

我将div绑定到touchstart和touchmove事件。我只是不确定如何编写这些函数。

if event.originalEvent.targetTouches.length => 2之类的东西设置为X和Y.

我是否平均了两个手指的位置?然后对数据应用css变换?如何将它从DOM的流程中拉出来,静态定位?

任何例子都会很棒,谢谢!

1 个答案:

答案 0 :(得分:1)

在CoffeeScript中,我还编辑了它以使用全局变量来进行泛化。我没有使用全局变量。

    $('#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