在触摸屏上拖放 [英] drag-and-drop on touchscreen
问题描述
我一直在寻找关于这些事件如何运作的明确指南，现在我比开始时更加困惑。
I've been searching for a clear guide on how these events work and now I'm more confused than when I started.
我网站的某些功能涉及拖和下降。当前移动设备（或任何没有鼠标的东西）通过让用户选择项目，点击移动按钮，然后触摸放置点来支持。虽然这很有效（项目在可见网格上），但它并不像拖动一样友好。
Certain features of my site involve drag-and-drop. Currently mobile devices (or anything without a mouse) are supported by having the user select the item, tap the "move" button, then touch the drop point. While this works quite well (items are on a visible grid), it's not exactly as user-friendly as dragging.
我最初的理解是，无论我在哪里分配 element.onmousedown ， element.onmousemove 和 element.onmouseup 我可以只需将相同的处理程序分配给 element.ontouchstart ， element.ontouchmove 和 element.ontouchend 分别。
My initial understanding is that, wherever I assign element.onmousedown, element.onmousemove and element.onmouseup I can simply also assign the same handler to element.ontouchstart, element.ontouchmove and element.ontouchend respectively.
然而，这留下了以下问题：
However, that leaves the following questions:
- 如何获取触摸点的坐标，以及它相对于什么？
- 是否会平移视图（拖动的默认操作），如果是这样的话可以取消吗？
- 如果一个手指恰好位于可拖动元素上，我怎样才能避免干扰多点触控操作，例如捏缩放？
推荐答案
您可以通过测量设备宽度/高度来确定坐标（window.innerH 8 / window.innerWidth）。
You can determine coordinates by measuring device width/height (window.innerHeight/window.innerWidth).
这篇文章是触摸事件和覆盖它们的一个很好的起点：$ b $ b http://www.html5rocks.com/en/mobile/touch/
This article is a good starting point for touch events and overriding them: http://www.html5rocks.com/en/mobile/touch/
多点触控手势不应干扰可拖动元素。如果它们在干扰，您可以在事件处理程序中使用条件：
（事件处理程序）
if（event.touches === 1）处理事件
Multi-touch gestures shouldn't interfere with the draggable elements. You can use conditionals in your event handlers if they are interfering: (event handler) if (event.touches === 1) handle the event
这篇关于在触摸屏上拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
