触摸屏设备上的HTML5拖放API

Question

触摸屏设备上的HTML5拖放API

apihtmldrag-and-droptouchscreen

35

我在想HTML5拖放API是否支持触摸屏幕显示器。

我想到了iPhone，但我知道它尚未支持。我在想这是不是苹果公司赶上来支持Safari移动版的HTML5拖放，但我也在想可能是HTML5 API的功能不足以支持此功能，但我非常怀疑这点。

那么标准的触摸屏笔记本电脑或类似设备呢？我没有这样的设备，所以无法测试，但我想应该支持，因为据我所知，该表格界面只是替换了鼠标控制，所以从浏览器的角度来看，最终用户实际上只是在使用鼠标。

有什么想法吗？

- Qcom

10

建议将标题改为完全拼写出“拖放(Drag & Drop)”。人们可能会误以为你指的是“龙与地下城(Dungeons & Dragons)”。 - Andy Ford

1

哈哈，太对了，我甚至不知道为什么要缩写那个词，谢谢！ - Qcom

1

我不确定Sencha Touch的工作原理。但我确信它使用HTML5来实现触摸功能：http://www.sencha.com/products/touch/ - Wolph

是的，谢谢，我实际上忘记了那个。我最近才看到它，但弄清楚他们如何仅使用HTML、CSS和JS实现它会很好。 - Qcom

3个回答

7

虽然这是一个关于旧话题的帖子，但因为我有一些经验并且这仍然是个问题，我想尝试一下...

触摸和拖放不能很好地协同工作。请考虑对于拖放操作，你有一个隐含的鼠标按下=>鼠标移动=>鼠标放开的事件序列。在触摸环境中，你不仅具有标准的touchstart、touchmove和touchend事件，还可以有实际手势，在各个平台上具有特定的含义。这些手势是由触摸事件、它们的顺序和时间组合而成。

那么如何使用触摸来拖动元素呢？通过捕获touchstart和touchmove吗？不是的。由于手指较粗，几乎每个触摸事件都会同时有touchstart和touchmove。你还会偶尔碰到屏幕不干净时两个touchstart只有一个touchmove的情况。

那么捕获touchstart然后等待看看用户是否移动了一定距离呢？不行。那里的问题是，当用户移动他的手指15像素（或其他距离）时，什么也不发生，然后元素突然跳到他的手指位置，用户会看到这个“故障”。正常的反应是抬起手指，而在这种情况下，这将触发放下操作，这是错误的答案。

最后，试图开发一个接口，其中一些元素是静止的，其他元素可以拖放，但不必须，这是试图将桌面环境适配到触摸设备中。这些范式并不相匹配。

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

- Jim Jackson II

17

在触摸设备上，每一件事情都是基于“拖动”的概念吗？在开始使用您的手机/平板电脑之前，您必须拖动滑块（滑动以解锁）。你提到的所有问题都已经得到解决。唯一的问题出现在您试图拖动可滚动区域内的元素时：用户是想滚动还是拖动？只有在这种情况下，您可能无法使用“可拖动” - 除非您限制/锁定滚动（例如，只能在Y轴上滚动，在X轴上拖动）。 - fregante

1

这甚至没有解决手头的问题。 - Romain Vincent

3

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

http://touchpunch.furf.com/

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

- roman m

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- coto · Accepted Answer

有一些原生的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 属性），因为它具有更好的性能。