前端工程建设师-设计开发拖拽从dojo到html5教学文档.docxVIP

拖拽是 Web 2.0 应用中最流行的技术之一。本文将介绍如何在网络应用程序中使用 dojo 和 HTML5 这两种技术的拖拽功能。并将通过示例详细介绍 HTML5 的拖拽功能。 AD： Dojo 及 HTML 5 简介 HYPERLINK /art/201008/221831.htm \t _blank Dojo 是目前最流行的开源 HYPERLINK /art/201010/231771.htm \t _blank JavaScript 工具库之一，很多开发者以及企业用户都把Dojo 作为首选的 JavaScript 工具。Dojo 为 Web 应用的开发提供了大量的客户端组件，能够让你可以方便的进行 HTML DOM 操作、拖拽、 HYPERLINK /art/201101/243933.htm \t _blank AJAX 调用、定制可视化控件等来使得你的 Web 应用变成富网络应用 ( HYPERLINK /art/201101/242768.htm \t _blank RIA)。而且 Dojo 在性能、可访问性、多语言支持以及文档方面都做的非常出色，这也是企业选择 Dojo 的原因之一。 51CTO推荐专题： HYPERLINK /art/200907/133407.htm \t _blank HTML 5 下一代Web开发标准详解 HYPERLINK /art/200907/133407.htm \t _blank 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. 创建拖拽的源容器和可拖拽的元素 div?id=source?style=height:400px;?dojoType=dojo.dnd.Source? ? ??div?id=item1?class=dojoDndItem?item?dndType=divItemitem1/div? ? ??img?src=w3c.jpg?class=dojoDndItem?item?dndType=imageItem/img? ? ??a?href=/TR/html5/?class=dojoDndItem?item?dndType=linkItem? ??HTML5?specification/a? ? ?/div?? 对于 Target 我们可以创建一个 div，然后加上属性 dojoType=”dojo.dnd.Target”和属性 accept。不在 accept 中的类型的 dojoDndItem 元素将不被这个容器接受。例如清单 2 中的目标容器只接受 divItem 和 imageItem 这两种类型，那么清单 1 中的 linkItem 将不能被拖到这个目标容器中。 清单 2. 创建拖拽的目标容器和可接受的类型 div?id=target?style=height:400px;?do