触摸屏设备上的 HTML5 拖放 API

Posted 2023-05-08

【中文标题】触摸屏设备上的 HTML5 拖放 API

【英文标题】：HTML5 Drag and Drop API on Touch Screen Devices

【发布时间】：2011-03-23 21:10:12

【问题描述】：

我只是想知道用于拖放的 html5 API 是否包含对触摸屏显示的支持。

我在考虑 iPhone，但我知道这还不支持。我想知道这是否只是 Apple 的一部分，以支持 Safari 移动设备上的 HTML5 拖放，但我也认为 HTML5 API 可能不够强大，但我非常怀疑这一点。

在标准触摸屏笔记本电脑平板电脑或类似设备上怎么样，我没有，所以我无法测试，但我想包括支持，因为据我所知，该桌面界面只是取代鼠标控制，因此，就浏览器而言，最终用户实际上只是在使用鼠标。

有什么想法吗？

【问题讨论】：

我建议更改标题以完整拼写“拖放”。人们可能会认为您的意思是“龙与地下城”。

哈哈，太真实了，我什至不知道我为什么要缩写，谢谢！

我不确定 Sencha touch 是如何工作的。但我确实相信它使用 HTML5 来启用触摸：sencha.com/products/touch

是的，谢谢，我实际上忘记了这一点。我最近才看到它，但很高兴能弄清楚他们是如何只用 HTML、CSS 和 JS 实现它的……

【参考方案1】：

有一些原生 HTML5 事件可在 WebKit（Chrome 和 Safari）中运行……仅限移动版本。 这些事件的名字是touchstart、touchmove、touchend、touchcancel

使用触摸重新定位元素的示例是：

$(document).bind("touchstart", function(e) 
e.preventDefault();
var orig = e.originalEvent;
var x = orig.changedTouches[0].pageX;
var y = orig.changedTouches[0].pageY;

$("#element").css(top: y, left: x);
);

更多信息：https://developer.apple.com/documentation/webkitjs/touchevent

顺便说一句，我更喜欢使用 webkit-transform（CSS 属性），因为它具有更好的性能。

【讨论】：

虽然这是有用的信息，但它并不能真正回答手头的问题。使用触摸事件将是一种解决方法。

在带有触摸屏的笔记本电脑上的 Kubuntu 16.10 上使用 WebKit (Chromium 57)，并生成事件。触摸事件并非仅由移动版本生成。

@ChristianHujer 无法确认 Google Chrome。

【参考方案2】：

老线程，但由于我有一些经验，但它仍然是一个问题，我会试一试......

触摸和拖放并不能很好地结合在一起。考虑到对于拖放，您有一个隐含的 mouse-down => mouse-move => mouse-up 事件序列。在触摸环境中，您不仅有标准的 touchstart、touchmove 和 touchend 事件，而且还有在各种平台上具有特定含义的实际手势。这些手势是触摸事件、它们的顺序和时间的组合。

那么你将如何使用触摸来拖动元素？通过捕获 touchstart 和 touchmove？不，由于胖手指问题，几乎每个触摸事件都有 touchstart 和 touchmove。你也可以有两个 touchstart，只有一个 touchmove，偶尔会出现脏屏幕。

捕获 touchstart 然后等待查看用户是否移动了一定距离怎么样？不，问题在于，当用户将手指移动 15 个像素（或任何距离）并且没有任何反应时，用户会看到“故障”，然后该元素突然卡到他的手指位置。正常的反应是抬起手指，在这种情况下会引发下降，这是错误的答案。

最后，试图开发一个界面，其中一些元素是静止的，而另一些元素可以，但不一定是，可拖动是试图将桌面环境融入触摸设备。范式不适合。

最好查看各种触摸框架并使用内置手势。

【讨论】：

触控设备上的每一件事不都是基于拖动的概念吗？实际上你必须先拖动一个滑块才能开始使用您的手机/平板电脑（滑动解锁）。你说的所有问题都解决了。当您尝试在可滚动区域内拖动元素时，唯一的问题是：用户是在尝试滚动还是拖动？只有在这种情况下，您可能无法使用“可拖动”——除非您限制/锁定滚动（例如，仅在 Y 轴上滚动，在 X 轴上拖动）

这甚至不能解决手头的问题。

【参考方案3】：

遇到同样的问题，这里有几个免费解决方案：

http://touchpunch.furf.com/

https://www.createjs.com/demos/easeljs/draganddrop