Question

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

我在想iPhone，但我知道这还不支持。我想知道这是否只是赶上了Apple的一部分，以支持HTML5拖放Safari手机，但我也在想也许HTML5 API对此不够强大，但我非常怀疑。

在标准触摸屏笔记本电脑平板电脑等上怎么样，我没有，所以我无法测试，但我想会包括支持，因为据我所知，表接口只是替换鼠标控制，因此，就浏览器而言，最终用户实际上只是使用鼠标。

有什么想法吗？

Answer 1

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

触摸和拖放不能很好地一起玩。考虑到拖放时你有一个隐含的鼠标按下=＆gt; mouse-move =＆gt;鼠标向上的事件序列。在触摸环境中，您不仅拥有标准的touchstart，touchmove和touchend事件，而且您还拥有在各种平台上具有特定含义的实际手势。这些手势是触摸事件，它们的顺序和时间的组合。

那你怎么用触摸拖动一个元素？通过捕获touchstart和touchmove？不会。由于胖指问题，几乎每个触摸事件都有触摸启动和触摸移动。你也可以有两个触摸屏，偶尔只有一个触摸屏，屏幕很脏。

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

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

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

Answer 2

有一些原生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

BTW我更喜欢使用webkit-transform（CSS属性），因为它有更好的性能。

Answer 3

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

http://touchpunch.furf.com/

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

触摸屏设备上的HTML5拖放API

3 个答案: