Jquery plugins 如何通过触摸事件在画布上移动图像？

我尝试了和，但我发现它们只适用于鼠标事件。我想把一些图片放在画布上，让用户 “触碰”它可以拖放。但似乎图片没有接收到用户的触摸事件，只有画布接收到事件

有什么建议或插件吗？

---

ps：我在Phonegap和Android系统上开发该应用程序。

您还需要处理MSPointer事件，这些事件是Microsoft为管理touch而发布的（它是在Win8和WinPhone 8中引入的）

每帧所需的步骤：

检测鼠标、触摸和MSPointer事件

检查与图像碰撞的光标位置

移动图像

关于第一点：

function getCursorPositions (event, canvas) {
var element = canvas, offsetX = 0, offsetY = 0, positions = [];

if (element.offsetParent) {
    do {
        offsetX += element.offsetLeft;
        offsetY += element.offsetTop;
    } while ((element = element.offsetParent));
}

// Add padding and border style widths to offset
/*offsetX += stylePaddingLeft;
offsetY += stylePaddingTop;

offsetX += styleBorderLeft;
offsetY += styleBorderTop;*/

var touch = event;
//if multi-touch, get all the positions
if (event.targetTouches) { // or changedTouches
    var touchPoints = (typeof event.targetTouches !== 'undefined') ? event.targetTouches : [event];
    for (var i = 0; i < touchPoints.length; i++) {
        touch = touchPoints[i];

        positions.push({touch.pageX - offsetX, touch.pageY - offsetY});
    }
}
else {
    positions.push({touch.pageX - offsetX}, {touch.pageY - offsetY});
}

    //return positions for mouse or fingers
return positions;
}

函数getCursorPositions（事件，画布）{ var元素=canvas，offsetX=0，offsetY=0，positions=[]； if（元素offsetParent）{ 做{ offsetX+=element.offsetLeft； offsetY+=element.offsetTop； }而（（element=element.offsetParent））； } //将填充和边框样式宽度添加到偏移 /*offsetX+=样式填充左； offsetY+=stylePaddingTop； offsetX+=样式边界左； offsetY+=样式边界顶部*/ var-touch=事件； //如果是多点触摸，则获取所有位置 if（event.targetTouches）{//或changedTouches 变量接触点=（typeof event.targetTouches！=“未定义”）？event.targetTouches:[event]； 对于（变量i=0；i 对于第二点，至少有两种方法可以检测碰撞：

您可以检查鼠标位置是否在项目的边界框内：

function pointIsInRegion (point, targetRegion, threshold) {
    return point.x >= (targetRegion.position.x - threshold) &&
        point.y >= (targetRegion.position.y - threshold) &&
        point.x <= (targetRegion.position.x + targetRegion.dimension.width + threshold) &&
        point.y <= (targetRegion.position.y + targetRegion.dimension.height + threshold);
}

功能点区域（点、目标区域、阈值）{
返回点.x>=（targetRegion.position.x-阈值）&&
point.y>=（targetRegion.position.y-阈值）&&
point.x kinecticjs为每个图像（或组）设置了一个“可拖动”布尔属性，并在“touchstart”、“touchend”、“dragstart”、“dragend”和“dragmove”上进行检测……因此您可以根据需要进行选择。您是否尝试过使用它？