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

拖拽是Web2.0应用中最流行的技术之一。本文将介绍如何在网络应用程序中使用dojo和HTML5这两种技术的拖拽功能。并将通过示例详细介绍HTML5的拖拽功能。AD：Dojo及HTML5简介Dojo是目前最流行的开源JavaScript工具库之一，很多开发者以及企业用户都把Dojo作为首选的JavaScript工具。Dojo为Web应用的开发提供了大量的客户端组件，能够让你可以方便的进行HTMLDOM操作、拖拽、AJAX调用、定制可视化控件等来使得你的Web应用变成富网络应用(RIA)。而且Dojo在性能、可访问性、多语言支持以及文档方面都做的非常出色，这也是企业选择Dojo的原因之一。51CTO推荐专题：HTML5下一代Web开发标准详解HTML5是最新一代的HTML，它将成为HTML、XHTML以及HTMLDOM的新标准，HTML5是W3C与WHATWG合作的结果，目前仍外于开发中;自从上一代HTML4，Web世界已经发生了巨大的变化，HTML5的到来将更大的促进Web的发展，HTML5提供了很多新的功能，主要有：◆新的HTML元素，例如section,nav,header,footer,article等◆用于绘画的Canvas元素◆用于多媒体播放的video和audio元素◆用于定位的GeolocationAPI◆本地存储以及离线应用◆WebWorkers◆拖拽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.divid=sourcestyle=height:400px;dojoType=dojo.dnd.Source2.divid=item1class=dojoDndItemitemdndType=divItemitem1/div3.imgsrc=w3c.jpgclass=dojoDndItemitemdndType=imageItem/img4.ahref=，然后加上属性dojoType=”dojo.dnd.Target”和属性accept。不在accept中的类型的dojoDndItem元素将不被这个容器接受。例如清单2中的目标容器只接受divItem和imageItem这两种类型，那么清单1中的linkItem将不能被拖到这个目标容器中。清单2.创建拖拽的目标容器和可接受的类型1.divid=targetstyle=height:400px;dojoType=dojo.dnd.Target2.accept=divItem,imageItem真正Web应用的拖拽没有这么简单，开发者往往需要在拖拽的过程中更多的介入。这时候可以通过对Dojo提供的dojo.dnd.Source和dojo.dnd.Target进行继承扩展，开发满足业务需要的功能和特性。这里将不赘述。使用HTML5创建拖拽应用在这一章中，我们将要使用HTML5创建一个简单的拖拽应用，如图1所示，用户可以把网页上内容从左边的区域拖放到右边的区域。这个应用程序的代码可到附件中可以下载。图1.HTML5拖拽应用效果图创建可以拖动的节点使用HTML5创建拖拽只需要对可拖拽的节点进行声明——给可以拖拽的节点添加draggable属性并设值为true。如清单3中的div节点，通过添加draggable属性就可以拖拽了。在HTML5中img和a默认情况下是可以拖拽的，所以不需要设置draggable属性。清单3.通过添加draggable属性来创建源容器中可以拖动的节点1.divid=sourcestyle=height:300px;2.divid=item1class=itemdraggable=trueitem1/div3.imgid=item2src=w3c.jpgclass=item/img4.aid=item3href=，我们需要给指定的节点来绑定一些事件来使之成为具有源容器或目标容器的功能。在HTML5的拖拽过程中的事件有7个，分别是应用在目标容器或拖动节点上的dragstart,drag,dragend等3个事件，以及应用在目标容器节点上的dragenter,dragover,dragleave和drop等4个事件。表1中对这些事件的触发机制和常见的操作进行了描述。表1.HTML5拖拽过程中可以绑定的事件备注:在Dojo中所有dnd源容器或目标容器在拖拽开始时都会调用onDndStart事件方法，而在HTML5中只有拖动的节点及源容器可以触发dragstart事件，其他容器包括目标容器在拖动开始时不会感知源容器及拖动节点的dragstart事件。清单4展示给目标容器绑定dragenter,dragover,dragleave,drop事件的示例代码。在dragenter和dragleave事件中，我们对目标容器的背景样式进行修改使得用户感知目标容器的状态(如图2所示)。在dragover事件中我们对清单3中的链接元素(id属性值为item3)的节点进行了限制。drop事件中我们要把拖动的节点插入到目标节点的DOM结构中。清单4.创建目标容器的事件1.vartarget=dojo.byId('target');2.dojo.connect(target,'dragover',function(e){3.//doesn'tallowslinkitem(id=“item3”)todrop4.if(e.dataTransfer.getData('id')!=item3){5.e.preventDefault();6.}7.});8.9.dojo.connect(target,'dragenter',function(e){10.//addstyle11.dojo.addClass(target,over);12.});13.14.dojo.connect(target,'dragleave',function(){15.//removestyle16.dojo.removeClass(target,over);17.});18.19.dojo.connect(target,'drop',function(e){20.//removestyleifdropissuccessful21.dojo.removeClass(target,over);22.23.//stopsthebrowserfromredirecting24.if(e.stopPropagation)e.stopPropagation();25.26.27.varitemId=e.dataTransfer.getData('id');28.vardragItem=dojo.byId(itemId);29.e.target.appendChild(dragItem);30.31.}图2.当拖动节点到目标容器是时对目标容器进行高亮显示从清单4中我们在目标容器上对事件对象的dataTransfer属性进行了getData操作——取出了关键字id对应的数据。在HTML5拖拽过程中，用户可以在表1定义的事件里通过event.dataTransfer得到DataTransfer对象(详见W3C网站上的接口定义)并对其进行定制传输数据、定制拖拽影像等操作。例如我们可以在dragstart事件中通过setData方法初始化数据(代码详见附件)。表2中列出了这各数据对象的方法及常用的用途。表2.DataTransfer的常用方法与桌面进行交互除了在网页中对一些页面上的元素进行拖拽以外，HTML5扩充的API还允许网页与文件系统进行交互，比如从文件系统拖一个或几个文件到网页中，或是从网页拖到文件系统中。以前者为例，当我们从桌面或其它文件夹拖动文件到网页上某个目标结点时，我们可以通过DataTransfer的files属性得到这些文件数量以及文件的属性及内容。DataTransfer.files.length的大小即为拖动文件的数量，当没有拖动文件时，files.length的大小即为0，可用来判断是否有文件拖动。清单5.通过dataTransfer.files拿到文件对象1.varfiles=e.dataTransfer.files;2.varmsg=;3.for(vari=0;ifiles.length;i++){4.console.log(Name:+files[i].name+,fileSize:+files[i].size);5.vardataReader=newFileReader();6.dataReader.onload=function(){7.msg+=(content:+dataReader.result);8.}9.dataReader.readAsText(files[i]);10.}从清单5中的代码中我们可以看到files中存储了若干file对象，通过这个对象可以获取文件名，文件大小等。然后我们可以通过FileReader获取文件的内容。获取内容的FileReader并不是HTML5拖拽的功能，而是借助了FileAPI。它可以以文本，二进制，以及dataURL的形式读取，实现读取文件内容实现文件上传等，在我们的示例代码HTML5dndfile.html中我们演示了通过readAsText方法读取文本文件和通过readAsDataURL方法读取图像文件的使用。与桌时行交互时，我们只需要对将清单5中给出的代码稍加修改加到目标容器的drop事件中，其它事件不用修改。例如清单6所示。清单6.在目标容器的drop事件读取文本文件的内容1.dojo.connect(textdiv,'drop',function(e){2.if(e.stopPropagation){3.e.stopPropagation();//stopsthebrowserfromredirecting4.}5.varfiles=e.dataTransfer.files;6.varmsg=;7.for(vari=0;ifiles.length;i++){8.msg+=(Name:+files[i].fileName+,fileSize:+files[i].fileSize);9.vardataReader=newFileReader();10.dataReader.onload=function(){11.msg+=(content:+dataReader.result);