在触摸屏上拖放

drag-and-drop on touchscreen

本文关键字：拖放 触摸屏      更新时间：2023-09-26

我一直在寻找有关这些事件如何运作的清晰指南，现在我比开始时更加困惑。

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

我

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

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

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

其他答案更好地解决了原始问题，但对于像我一样发现此链接试图使现有的单击/拖动（鼠标）功能在触摸屏上工作的后代来说，这是一个非常基本的解决方案。

如果要添加事件侦听器，则可以在"鼠标按下"中添加相应的"touchstart"行，如下所示：

 document.getElementById('throttle').addEventListener('mousedown', mouseDown, false);
 document.getElementById('throttle').addEventListener('touchstart', mouseDown, false);

对任何鼠标移动（触摸移动）和鼠标向上（触摸端）执行相同的操作。

在函数中，当您获取鼠标坐标时，请使用：

  var top = e.clientY || e.targetTouches[0].pageY; //the same syntax for the x value

这样，它会先检查鼠标单击并拖动，然后如果未定义，则查找触摸交互。

就像我说的，非常准系统，但它让我开始了。

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

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

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

以下是有关移动和桌面屏幕坐标之间差异的简短摘要： screenX/Y、clientX/Y 和 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
    };
};
相关文章：