前端工程师-设计开发拖拽从Dojo到HTML5教学

1、拖拽是 web 2.0 应用中最流行的技术之一。本文将介绍如何在网络应用程序中使用 dojo 和 html5 这两种技术的拖拽功能。并将通过示例详细介绍 html5 的拖拽功能。ad： dojo 及 html 5 简介dojo 是目前最流行的开源 javascript 工具库之一，很多开发者以及企业用户都把dojo 作为首选的 javascript 工具。dojo 为 web 应用的开发提供了大量的客户端组件，能够让你可以方便的进行 html dom 操作、拖拽、ajax 调用、定制可视化控件等来使得你的 web 应用变成富网络应用 (ria)。而且 dojo 在性能、可访问性、多语言支持以及

2、文档方面都做的非常出色，这也是企业选择 dojo 的原因之一。51cto推荐专题：html 5 下一代web开发标准详解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 元素用于多媒体

3、播放的 video 和 audio 元素用于定位的 geolocation api本地存储以及离线应用web workers拖拽 api文件 api我们主要对 html 5 的拖拽功能进行讲解，并结合文件 api 与桌面进行交互。来与 dojo 的 dnd 拖拽组件进行比较。使用 dojo 创建及定制拖拽应用类似 dojo 其他组件，拖拽的实现有两种方式：声明式和编程式。在这里我们使用声明式的方式做简要的介绍。在 dojo 拖拽实现中，有两个重要的元素 dojo.dnd.source 和 dojo.dnd.target。这两个元素分别标示了拖拽中的源容器 source 和目标容器 target

4、。值得注意的是源容器 source 默认也是目标容器 target，而不需要作目标容器 target 的声明。我们在源容器 source 中创建一些可以拖动的元素，要让这些元素可拖动，我们要为这些元素添加 class 属性值 dojodnditem。下面的示例代码定义了一个源容器 source 以及一些可以拖动的元素。在这些可以拖动的元素中我们可以定义它们的拖拽类型 dndtype。dndtype 的值开发者可以自己定义，而目标容器 target 元素的 accept 属性定义了该目标容器接受的拖拽类型。清单 1. 创建拖拽的源容器和可拖拽的元素1. <div id="

5、;source" style="height:400px;" dojotype="dojo.dnd.source">   2.   <div id="item1" class="dojodnditem item" dndtype="divitem">item1</div>   3.   <img src

6、="w3c.jpg" class="dojodnditem item" dndtype="imageitem"></img>   4.   <a href="/tr/html5/" class="dojodnditem item" dndtype="linkitem"> 5.  

7、0;html5 specification</a>   6.  </div>  对于 target 我们可以创建一个 div，然后加上属性 dojotype=”dojo.dnd.target”和属性 accept。不在 accept 中的类型的 dojodnditem 元素将不被这个容器接受。例如清单 2 中的目标容器只接受 divitem 和 imageitem 这两种类型，那么清单 1 中的 linkitem 将不能被拖到这个目标容器中。清单 2. 创建拖拽的目标容器和可接受的类型1. <div

8、60;id="target" style="height:400px;" dojotype="dojo.dnd.target"   2. accept="divitem, imageitem"> 真正 web 应用的拖拽没有这么简单，开发者往往需要在拖拽的过程中更多的介入。这时候可以通过对 dojo 提供的 dojo.dnd.source 和 dojo.dnd.target 进行继承扩展，开发满足业务需要的功能和特性。这里将不赘述。使用 html 5

9、 创建拖拽应用在这一章中，我们将要使用 html 5 创建一个简单的拖拽应用，如图 1 所示，用户可以把网页上内容从左边的区域拖放到右边的区域。这个应用程序的代码可到附件中可以下载。图 1. html 5 拖拽应用效果图 创建可以拖动的节点使用 html 5 创建拖拽只需要对可拖拽的节点进行声明给可以拖拽的节点添加 draggable 属性并设值为 true。如清单 3 中的 div 节点，通过添加 draggable 属性就可以拖拽了。在 html 5 中<img>和<a> 默认情况下是可以拖拽的，所以不需要设置 draggable 属性。清单 3. 通过添

10、加 draggable 属性来创建源容器中可以拖动的节点1. <div id="source" style="height:300px;">   2.   <div id="item1" class="item" draggable="true">item1</div>   3.   <img id="it

11、em2" src="w3c.jpg" class="item"></img>   4.   <a id="item3" href="/tr/html5/" class="item">html5 specification</a>   5.  </div> 

12、0;创建 html 5 拖拽的源容器和目标容器在 html 5 中，我们需要给指定的节点来绑定一些事件来使之成为具有源容器或目标容器的功能。在 html 5 的拖拽过程中的事件有 7 个，分别是应用在目标容器或拖动节点上的 dragstart, drag, dragend 等 3 个事件，以及应用在目标容器节点上的dragenter, dragover, dragleave 和 drop 等 4 个事件。表 1 中对这些事件的触发机制和常见的操作进行了描述。表 1. html 5 拖拽过程中可以绑定的事件备注 : 在 dojo 中所有 dnd 源容器或目标容器在拖拽开始时都会调用 ondnds

13、tart 事件方法，而在 html 5 中只有拖动的节点及源容器可以触发 dragstart 事件，其他容器包括目标容器在拖动开始时不会感知源容器及拖动节点的 dragstart 事件。清单 4 展示给目标容器绑定 dragenter, dragover, dragleave, drop 事件的示例代码。在 dragenter 和 dragleave 事件中，我们对目标容器的背景样式进行修改使得用户感知目标容器的状态(如图 2 所示)。在 dragover 事件中我们对清单 3 中的链接元素(id 属性值为 item3)的节点进行了限制。drop 事件中我们要把拖动的节点插入到目标节点的 do

14、m 结构中。清单 4. 创建目标容器的事件1. var target = dojo.byid('target');   2.  dojo.connect(target, 'dragover', function(e)   3.   / doesn't allows link item (id = “item3”) to drop 

15、60;4.   if (e.datatransfer.getdata('id') != "item3")   5.     e.preventdefault();   6.      7.  );   8.  9.  dojo.connect(target, 'dragenter', function(e)

16、   10.   /add style   11.   dojo.addclass(target, "over");   12.  );   13.  14.  dojo.connect(target, 'dragleave', function()   15.   /remove style   16

17、.   dojo.removeclass(target, "over");   17.  );   18.  19.  dojo.connect(target, 'drop', function(e)   20.   /remove style if drop is successful   21.   dojo

18、.removeclass(target, "over");   22.       23.   / stops the browser from redirecting   24.   if (e.stoppropagation) e.stoppropagation();   25.       2

19、6.     27.   var itemid = e.datatransfer.getdata('id');   28.   var dragitem = dojo.byid(itemid);   29.   e.target.appendchild(dragitem);     30.     31.  &#

20、160; 图 2. 当拖动节点到目标容器是时对目标容器进行高亮显示从清单 4 中我们在目标容器上对事件对象的 datatransfer 属性进行了 getdata 操作取出了关键字 id 对应的数据。在 html 5 拖拽过程中，用户可以在表 1 定义的事件里通过 event.datatransfer 得到 datatransfer 对象 ( 详见 w3c 网站上的接口定义)并对其进行定制传输数据、定制拖拽影像等操作。例如我们可以在 dragstart 事件中通过 setdata 方法初始化数据(代码详见附件)。表 2 中列出了这各数据对象的方法及常用的用途。表 2. datatra

21、nsfer 的常用方法与桌面进行交互除了在网页中对一些页面上的元素进行拖拽以外，html 5 扩充的 api 还允许网页与文件系统进行交互，比如从文件系统拖一个或几个文件到网页中，或是从网页拖到文件系统中。以前者为例，当我们从桌面或其它文件夹拖动文件到网页上某个目标结点时，我们可以通过 datatransfer 的 files 属性得到这些文件数量以及文件的属性及内容。datatransfer.files.length 的大小即为拖动文件的数量，当没有拖动文件时，files.length 的大小即为 0，可用来判断是否有文件拖动。清单 5. 通过 datatransfer.files 拿到文件

22、对象1. var files = e.datatransfer.files;   2.   var msg = ""   3.   for (var i = 0; i < files.length; i+)    4.    console.log ("name: 

23、;" +  + ", filesize: " + filesi.size);   5.    var datareader = new filereader();   6.    datareader.onload = function()   7.    

24、  msg += ("content: " + datareader.result);   8.       9.   datareader.readastext(filesi);   10.    从清单 5 中的代码中我们可以看到 files 中存储了若干 file 对象，通过这个对象可以获取文件名，文件大小等。然后我们可以通过 filereader 获取文件的内

25、容。获取内容的 filereader 并不是 html 5 拖拽的功能，而是借助了 file api 。它可以以文本，二进制，以及 dataurl 的形式读取，实现读取文件内容实现文件上传等，在我们的示例代码 html 5dndfile.html 中我们演示了通过 readastext 方法读取文本文件和通过 readasdataurl 方法读取图像文件的使用。与桌时行交互时，我们只需要对将清单 5 中给出的代码稍加修改加到目标容器的 drop 事件中，其它事件不用修改。例如清单 6 所示。清单 6. 在目标容器的 drop 事件读取文本文件的内容1. dojo.connect(te

26、xtdiv, 'drop', function(e)   2.   if (e.stoppropagation)   3.     e.stoppropagation(); / stops the browser from redirecting   4.      5.   var files

27、0;= e.datatransfer.files;   6.   var msg = ""   7.   for (var i = 0; i < files.length; i+)    8.     msg += ("name: " +

28、60;filesi.filename + ", filesize: " + filesi.filesize);   9.     var datareader = new filereader();   10.     datareader.onload = function()   11.       msg += ("content: " + datareader.result);   12.       textdiv.textcontent = ms