拖拽:从Dojo到HTML5

  Dojo 及 HTML 5 简介

  Dojo 是目前最流行的开源 JavaScript 工具库之一,很多开发者以及企业用户都把Dojo 作为首选的 JavaScript 工具。Dojo 为 Web 应用的开发提供了大量的客户端组件,能够让你可以方便的进行 HTML DOM 操作、拖拽、AJAX 调用、定制可视化控件等来使得你的 Web 应用变成富网络应用 (RIA)。而且 Dojo 在性能、可访问性、多语言支持以及文档方面都做的非常出色,这也是企业选择 Dojo 的原因之一。

  HTML 5 是最新一代的 HTML,它将成为 HTML、XHTML 以及 HTML DOM 的新标准, HTML 5 是 W3C 与 WHATWG 合作的结果,目前仍外于开发中 ; 自从上一代 HTML4,Web 世界已经发生了巨大的变化,HTML 5 的到来将更大的促进 Web 的发展,HTML 5 提供了很多新的功能,主要有:

  ◆新的 HTML 元素,例如 section, nav, header, footer, article 等

  ◆用于绘画的 Canvas 元素

  ◆用于多媒体播放的 video 和 audio 元素

  ◆用于定位的 Geolocation API

  ◆本地存储以及离线应用

  ◆Web Workers

  ◆拖拽 API

  ◆文件 API

  我们主要对 HTML 5 的拖拽功能进行讲解,并结合文件 API 与桌面进行交互。来与 Dojo 的 dnd 拖拽组件进行比较。

  使用 Dojo 创建及定制拖拽应用

  类似 Dojo 其他组件,拖拽的实现有两种方式:声明式和编程式。在这里我们使用声明式的方式做简要的介绍。

  在 Dojo 拖拽实现中,有两个重要的元素 dojo.dnd.Source 和 dojo.dnd.Target。这两个元素分别标示了拖拽中的源容器 Source 和目标容器 Target。值得注意的是源容器 Source 默认也是目标容器 Target,而不需要作目标容器 Target 的声明。我们在源容器 Source 中创建一些可以拖动的元素,要让这些元素可拖动,我们要为这些元素添加 class 属性值 DojoDndItem。下面的示例代码定义了一个源容器 Source 以及一些可以拖动的元素。在这些可以拖动的元素中我们可以定义它们的拖拽类型 dndType。dndType 的值开发者可以自己定义,而目标容器 Target 元素的 accept 属性定义了该目标容器接受的拖拽类型。

  清单 1. 创建拖拽的源容器和可拖拽的元素

   1. div id="source" style="height:400px;" dojoType="dojo.dnd.Source"   
2.
div id="item1" class="dojoDndItem item" dndType="divItem"item1/div
3.
img src="w3c.jpg" class="dojoDndItem item" dndType="imageItem"/img
4.
a href="http://www.w3.org/TR/html5/" class="dojoDndItem item" dndType="linkItem"
5. HTML5 specification
/a
6.
/div

it知识库拖拽:从Dojo到HTML5,转载需保留来源!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。