在移动设备上,添加对标准HTML5拖放操作的支持

分享于 

6分钟阅读

Web开发

  繁體

问题

HTML5规范包括对拖放操作的支持。

这是所有现代桌面浏览器的支持,但不是在Android和IOS下运行的移动浏览器。 这是一个问题,因为使用HTML5开发应用程序的主要原因是在所有设备上运行的能力。

我怀疑移动浏览器不支持拖放,原因如下:

  • 他们的屏幕通常太小,无法用于拖放操作。
  • 对于其他任务,如滚动和缩放,它们使用触摸,这可能会干扰 d&。

但是很多移动设备都有足够大的屏幕。 这包括几乎所有平板电脑和大量手机。 而且,在交换/拖放支持时,不能够滚动或者缩放一些元素,这似乎是一个合理的折中。

因此,为了在移动设备上使用拖放,你有两个选择:

  • 忘记HTML5拖放api并使用自定义拖放库(。你自己的,或者多个现有选项之一) ;或者
  • 使用polyfill将触摸事件转换为HTML5拖放事件。

我们更喜欢第二种方法,因为标准很重要。 遵循HTML拖放标准而不是使用定制库意味着你现有的拖放代码将使用基于标准的框架和组件,而不会发生重大的更改。

例如许多Wijmo控件广泛地使用拖放:

  • 使用它来排列和调整行和列的大小。
  • GroupPanel 使用它来排列和排序组。
  • PivotPanel 使用它构建OLAP视图并提供上下文菜单。

然而,直到最近,在移动设备上运行这些功能都是有限的或者不存在的。 你可以使用鼠标拖放网格列。组和 pivot 字段,但不能使用触摸。

解决办法是什么呢

客户告诉我们要支持移动设备拖放操作时,我们决定遵循polyfill方法,并实现了将触摸事件转换为透明的DragDropTouch事件以透明地拖放事件的功能。 这允许我们一次提高所有控件的触摸支持,而不必更改任何控件。

DragDropTouch的工作方式如下:

  • 它将监听器附加到触摸事件。
  • 如果使用的是,它会检查目标元素是否具有可以拖动的可以拖动属性,或者包含在该元素的某个元素中。 如果是这样,它将保存对这个"拖动源"元素的引用,并阻止对事件的默认处理。
  • 上,它检查触摸是否移动了与原始值之间的某一阈值距离。 如果是这种情况,它将引发dragstart事件并继续监视移动 dragenter dragleave dragleave dragleave
  • touchend,增加了 dragend events events。

这足以处理拖放,但不足以完全支持触摸。 问题是,一旦在可以拖动元素上检测到一个触摸,就必须阻止事件的默认处理,以防止滚动。 但并非所有的触摸都意味着开始拖动操作。 用户可能只想单击/点击元素,或者双击它,或者显示上下文菜单。

换句话说,对触摸操作提供拖放支持是不够的;polyfill不必在触摸操作时干扰。

由于这里要求,polyfill必须执行一些附加任务:

  • 如果用户接触可以拖动元素但不开始拖动,则增加 mousemove mousemove,mouseup events events events事件,并单击事件。
  • 单击后,如果有新的 touchstart right,则引发 dblclick事件,然后
  • 当触摸持续一段时间,但用户不开始拖动元素时,提高 contextmenu contextmenu event事件的大小。

就是这么回事.

使用polyfill很容易。 你只需要将这里脚本标记添加到页面中:


<script src="scripts/DragDropTouch.js"></script>



这个脚本将会自动创建一个收费 DragDropTouch的实例,并开始翻译事件,使拖放操作在安卓和IOS设备上的工作方式与桌面浏览器一样。

我们创建了一个示例,演示了polyfill使用经典的HTML5拖放示例以及一些Wijmo控件的效果。 你可以在这里看到示例:

http://bernardo-castilho.github.io/DragDropTouch/demo/

图片 below 显示在iPad上运行的样例,而用户将元素A 拖动到一个新位置:

。iPad拖动屏幕截图

结束语

实现将触摸操作转换为拖放事件的polyfill是提高基于移动设备的拖放操作的有效方法。

描述了的扩展了支持拖放操作的几个Wijmo控件,但是它是通用的,因此它可以与其他基于标准的组件和应用程序一起工作。

只需要将一个脚本标记添加到应用程序中,打开它在iPad上,然后拖离 !

本文包含关于不同类型的指针事件的许多有趣信息,包括鼠标,触摸和针对单个"指针事件"集的建议标准:

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

本文重点关注HTML5的拖放:

http://www.html5rocks.com/en/tutorials/dnd/basics/


STA  添加  SUP  Html5  Opera  拖动