Dojo 及 HTML5 简介

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

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

• 新的 HTML 元素，例如 section,nav,header,footer,article 等
• 用于绘画的 Canvas 元素
• 用于多媒体播放的 video 和 audio 元素
• 用于定位的 Geolocation API
• 本地存储以及离线应用
• Web Workers
• 拖拽 API
• 文件 API

我们主要对 HTML5 的拖拽功能进行讲解，并结合文件 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
2
3
4
5

<div@H_404_49@ id@H_404_49@="source"@H_404_49@ style@H_404_49@="height: 400px;"@H_404_49@>@H_404_49@@H_404_49@
"item1"@H_404_49@ class@H_404_49@="dojoDndItem item"@H_404_49@>@H_404_49@@H_404_49@item1</div>@H_404_49@@H_404_49@@H_404_49@
<img@H_404_49@ "dojoDndItem item"@H_404_49@ src@H_404_49@="w3c.jpg"@H_404_49@ alt@H_404_49@=""@H_404_49@ />@H_404_49@@H_404_49@
  <a@H_404_49@ href@H_404_49@="http://www.w3.org/TR/html5/"@H_404_49@>@H_404_49@@H_404_49@
  HTML5 specification</a>@H_404_49@@H_404_49@</div>@H_404_49@@H_404_49@@H_404_49@

对于 Target 我们可以创建一个 div，然后加上属性 dojoType=”dojo.dnd.Target”和属性 accept。不在 accept 中的类型的 dojoDndItem 元素将不被这个容器接受。例如清单 2 中的目标容器只接受 divItem 和 imageItem 这两种类型，那么清单 1 中的 linkItem 将不能被拖到这个目标容器中。

清单 2. 创建拖拽的目标容器和可接受的类型

1
2

<@H_404_49@div id="target" style="height:400px;" dojoType="dojo.dnd.Target" 
accept="divItem,imageItem">@H_404_49@

真正 Web 应用的拖拽没有这么简单，开发者往往需要在拖拽的过程中更多的介入。这时候可以通过对 Dojo 提供的 dojo.dnd.Source 和 dojo.dnd.Target 进行继承扩展，开发满足业务需要的功能和特性。这里将不赘述。
使用 HTML5 创建拖拽应用@H_404_49@

在这一章中，我们将要使用 HTML5 创建一个简单的拖拽应用，如图 1 所示，用户可以把网页上内容从左边的区域拖放到右边的区域。这个应用程序的代码可到附件中可以下载。

图 1. HTML5 拖拽应用效果图

创建可以拖动的节点

使用 HTML5 创建拖拽只需要对可拖拽的节点进行声明——给可以拖拽的节点添加 draggable 属性并设值为 true。如清单 3 中的 div 节点，通过添加 draggable 属性就可以拖拽了。在 HTML5 中和默认情况下是可以拖拽的，所以不需要设置 draggable 属性。

清单 3. 通过添加 draggable 属性来创建源容器中可以拖动的节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

var@H_404_49@ target =@H_404_49@ dojo.byId@H_404_49@(@H_404_49@'target'@H_404_49@)@H_404_49@;@H_404_49@
 dojo.connect@H_404_49@(@H_404_49@target,@H_404_49@ 'dragover'@H_404_49@404_49@ function@H_404_49@(@H_404_49@e)@H_404_49@{@H_404_49@
  // doesn't allows link item (id = “item3”) to drop@H_404_49@
  if@H_404_49@ (@H_404_49@e.dataTransfer@H_404_49@.getData@H_404_49@'id'@H_404_49@)@H_404_49@ !=@H_404_49@ "item3"@H_404_49@{@H_404_49@
    e.preventDefault@H_404_49@(@H_404_49@;@H_404_49@
  }@H_404_49@
 }@H_404_49@;@H_404_49@ 

 dojo.'dragenter'@H_404_49@//add style@H_404_49@
  dojo.addClass@H_404_49@"over"@H_404_49@;@H_404_49@
 'dragleave'@H_404_49@//remove style@H_404_49@
  dojo.removeClass@H_404_49@'drop'@H_404_49@//remove style if drop is successful@H_404_49@
  dojo.;@H_404_49@ 

  // stops the browser from redirecting@H_404_49@
  stopPropagation@H_404_49@)@H_404_49@ e.var@H_404_49@ itemId =@H_404_49@ e.var@H_404_49@ dragItem (@H_404_49@itemId;@H_404_49@
  e.target@H_404_49@.appendChild@H_404_49@(@H_404_49@dragItem;@H_404_49@  	

 }@H_404_49@

1
2
3
4
5
6
7
8
9
10

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

dojo.(@H_404_49@textdiv;@H_404_49@ }@H_404_49@
  {@H_404_49@
    msg fileName@H_404_49@ fileSize@H_404_49@;@H_404_49@
    ;@H_404_49@
    dataReader.{@H_404_49@
      msg ;@H_404_49@
      textdiv.textContent@H_404_49@ =@H_404_49@ msg}@H_404_49@
    dataReader.;@H_404_49@