触摸屏设备上的 HTML5 拖放 API [英] HTML5 Drag and Drop API on Touch Screen Devices

问题描述

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

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

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

有什么想法吗?

解决方案

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

I was just wondering if the HTML5 API for Drag and Drop included support for touch screen displays.

I was thinking of iPhone, but I know this isn't supported yet. I was wondering if that is just catching up on the part of Apple, to support HTML5 drag and drop on Safari mobile, but I also was thinking maybe the HTML5 API wasn't powerful enough for this, but I highly doubt that.

How about on a standard touch screen laptop tablet or the like, I don't have one so I can't test but I would imagine that support is included because, as far as I know, that table interface just replaces mouse control, so, as far as the browser is concerned, the end-user is really just using a mouse.

Any thoughts?

解决方案

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.

这篇关于触摸屏设备上的 HTML5 拖放 API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！