触摸屏设备上的HTML5拖放API

Question

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

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

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

有什么想法吗？

Answer 1

老线程,但因为我有一些经验,这仍然是一个问题,我会试一试...

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

那么你将如何使用触摸拖动元素？通过捕获touchstart和touchmove？不会.由于胖指问题,几乎每个触摸事件都有触摸启动和触摸移动.你也可以有两个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

顺便说一下,我更喜欢使用webkit-transform(CSS属性),因为它具有更好的性能.