在触摸屏上拖放

Posted 2023-05-08

【中文标题】在触摸屏上拖放

【英文标题】：drag-and-drop on touchscreen

【发布时间】：2012-08-02 19:15:33

【问题描述】：

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

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

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

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

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

【问题讨论】：

值得注意的是，移动设备几乎不支持拖放是有充分理由的：它会干扰滚动。因此，如果您确实将自己的 persuado 拖放系统扩展到移动设备，那么请绝对确定在拖动项目的方向上没有滚动条。否则，一个人可能会尝试滚动页面并最终拖动您的一个可拖动对象。反之亦然。

【参考方案1】：

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

如果您要添加事件侦听器，您可以像这样在“mousedown”中添加相应的“touchstart”行：

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

对任何 mousemove (touchmove) 和 mouseup (touchend) 执行相同操作。

在你的函数中，当你获得鼠标坐标时，使用：

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

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

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

【参考方案2】：

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

这篇文章是触摸事件和覆盖它们的一个很好的起点： http://www.html5rocks.com/en/mobile/touch/

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

【参考方案3】：

这里是关于移动和桌面屏幕坐标之间差异的简短摘要：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
    ;
;