在触摸屏上拖放-Java 学习之路

我一直在寻找关于这些事件如何运作的明确指南，现在我比起初时更困惑 .

我网站的某些功能涉及拖放 . 当前移动设备（或任何没有鼠标的东西）通过让用户选择项目，点击“移动”按钮，然后触摸放置点来支持 . 虽然这很有效（项目在可见网格上），但它不像拖动那样用户友好 .

我最初的理解是，无论我在哪里分配 element.onmousedown ， element.onmousemove 和 element.onmouseup ，我都可以简单地将相同的处理程序分配给 element.ontouchstart ， element.ontouchmove 和 element.ontouchend .

但是，这留下了以下问题：

如何获取触摸点的坐标，它的相对位置是什么？
是否会平移视图（拖动的默认操作），如果可以，则可以取消？
如果一个手指恰好位于可拖动元素上，如何避免干扰多点触控操作，例如捏缩放？

3 回答

0

您可以通过测量设备宽度/高度来确定坐标（window.innerHeight / window.innerWidth） .

本文是触摸事件和覆盖它们的良好起点：http://www.html5rocks.com/en/mobile/touch/

多点触控手势不应干扰可拖动元素 . 您可以在事件处理程序中使用条件，如果它们正在干扰:(事件处理程序）if（event.touches === 1）处理事件

回复于 2024-04-25T23:04:11+08:00
1
其他答案更好地解决了原始问题，但对于后代，像我一样，发现此链接试图使现有的点击/拖动（鼠标）功能在触摸屏上工作，这是一个非常简单的解决方案 .

如果您要添加事件侦听器，则可以向“mousedown”添加相应的“touchstart”行，如下所示：
```
document.getElementById('throttle').addEventListener('mousedown', mouseDown, false);
 document.getElementById('throttle').addEventListener('touchstart', mouseDown, false);
```
对任何鼠标移动（touchmove）和mouseup（touchend）执行相同操作 .

在您的函数中，当您获得鼠标坐标时，请使用：
```
var top = e.clientY || e.targetTouches[0].pageY; //the same syntax for the x value
```
这样它会检查鼠标点击并先拖动，然后如果未定义，则会查找触摸交互 .

就像我说的那样，非常准确，但它让我开始工作 .
回复于 2024-04-25T23:04:11+08:00

以下是有关移动和桌面屏幕坐标之间差异的简短摘要：What is the difference between screenX/Y, clientX/Y and pageX/Y?

以及实现 touchmove 事件侦听器的工作示例：

this.canvas.addEventListener("touchmove", function(e) {
        e.preventDefault();
        touchPosition(e);
    }, false);

var getCanvasPos = function(el) {
    var canvas = document.getElementById(el) || this.getCanvas();
    var _x = canvas.offsetLeft;
    var _y = canvas.offsetTop;

    while(canvas = canvas.offsetParent) {
        _x += canvas.offsetLeft - canvas.scrollLeft;
        _y += canvas.offsetTop - canvas.scrollTop;
    }

    return {
        left : _x,
        top : _y
    }
};

var touchPosition = function(e) {
    var mouseX = e.clientX - this.getCanvasPos(e.target).left + window.pageXOffset;
    var mouseY = e.clientY - this.getCanvasPos(e.target).top + window.pageYOffset;
    return {
        x : mouseX,
        y : mouseY
    };
};

回复于 2024-04-25T23:04:11+08:00

在触摸屏上拖放

3 回答

相关问题