在移动浏览器中拖放

时间:2012-12-12 02:01:49

标签: javascript drag-and-drop touch

所以我最近发现原生拖放实际上是由IE5引入的(我之前认为这是一个更新的添加,只有在IE9中......不可能更错!)

无论如何,我已经实现了对一组元素的拖放操作,但我很快发现移动设备似乎不支持拖放事件。

我对Touch事件并不是很了解,我能找到的关于它们的内容非常令人困惑。

我是否可能只是拖拉有问题,或者有人能指出我对触摸事件的可理解的介绍吗?

2 个答案:

答案 0 :(得分:3)

我知道你不喜欢使用jQuery。下面的资源可以帮助您在不使用jQuery的情况下处理Touch事件。

<强> 1。 W3C

http://www.w3.org/TR/touch-events/#dfn-touch-point

W3C于2011年12月15日发布了候选推荐“触摸事件版本1”。在此建议中提到了4种类型的触摸事件。

touchstart event
touchend event
touchmove event
touchcancel event

<强> 2。 Mozilla开发者网络

https://developer.mozilla.org/en-US/docs/DOM/Touch_events

在Mozilla开发者网络上,您可以看到“触摸事件”的定义 用于处理触摸事件的示例代码。

function startup() {
  var el = document.getElementsByTagName("canvas")[0];
  el.addEventListener("touchstart", handleStart, false);
  el.addEventListener("touchend", handleEnd, false);
  el.addEventListener("touchcancel", handleCancel, false);
  el.addEventListener("touchleave", handleLeave, false);
  el.addEventListener("touchmove", handleMove, false);
}

第3。 iOS开发人员库

http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW5

Apple的文档可能会帮助您了解iOS上的“支持的事件”。

<强> 4。关于HTML5 ROCKS TUTORIALS

http://www.html5rocks.com/en/mobile/touch/

文章“MULTI-TOUCH WEB DEVELOPMENT”展示了一个没有jQuery的有用示例代码。

答案 1 :(得分:0)

jQuery可能是一个很好的解决方案How to use jQuery Mobile for its touch event support only (no UI enhancements)? 最好使用js UI库而不是基本事件系统来管理触摸事件。