当前位置：文江博客话题详情

触摸屏设备上的 HTML5 拖放 API

发布于 2024-09-12 07:48:00 字数 263 浏览 6 评论 0原文

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

我正在考虑 iPhone，但我知道它还不支持。我想知道苹果是否正在追赶，以支持 Safari 移动设备上的 HTML5 拖放，但我也想也许 HTML5 API 对此不够强大，但我对此非常怀疑。

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

有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

煮茶煮酒煮时光 2024-09-19 07:48:00

有一些本机 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});
});

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

There are some native HTML5 Events that works in WebKit (Chrome & Safari) ... only mobile versions.
The name of these events are touchstart, touchmove, touchend, touchcancel

An example to reposition an element with touch is:

$(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});
});

More information: https://developer.apple.com/documentation/webkitjs/touchevent

BTW I prefer to work with webkit-transform (CSS properties) 'cause it has a better performance.

回复收藏 0 原文

倒带 2024-09-19 07:48:00

旧线程，但由于我已经有了一些经验，但它仍然是一个问题，我会尝试一下......

触摸和拖/放并不能真正很好地结合在一起。考虑到对于拖放，您有一个隐含的鼠标按下 =>鼠标移动=>鼠标松开事件序列。在触摸环境中，您不仅拥有标准的 touchstart、touchmove 和 touchend 事件，而且还拥有在各种平台上具有特定含义的实际手势。这些手势是触摸事件、其顺序和时间的组合。

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

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

最后，尝试开发一个界面，其中一些元素是固定的，而其他元素可以（但不是必须），可拖动是试图将桌面环境适应触摸设备。这些范式不适合。

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

回复收藏 0 原文