前端工程师设计开发拖拽从D到HTML教学

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下一代 webff发标准详解html 5是最新一代的 html.,它将成为 html xhtml以及html dom的新标准，html 5是 w3c与 whatw(合作的结果，目前仍外于开发中；自从上一代html4, web世界已经发生了巨大的变化，html5的到来将更大的促进 web的发展，htm15提供了很多新的功能，主要有：新的 html 元素，例如 section, nav, header, footer, article等用于绘画的canvas元素用于多媒体播放的video和audio元素用于定位的geol

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

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

5、: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.

6、 <a href ="/tr/html5/"class ="dojodnditem item" dndtype ="linkitem" >5. html5 specification</a>6. </div>对于 target 我们可以创建一个div ，然后加上属性dojotype= ” dojo.dnd.target ”和属性 accept 。不在 accept 中的类型的 dojodnditem 元素将不被这个容器接受。 例如清单2 中的目标容器只接受divite

7、m 和 imageitem 这两种类型， 那么清单 1中的 linkitem 将不能被拖到这个目标容器中。清单 2. 创建拖拽的目标容器和可接受的类型1. <div id ="target" style = "height:400px;" dojotype = "dojo.dnd.target"2. accept = "divitem, imageitem" >真正 web 应用的拖拽没有这么简单，开发者往往需要在拖拽的过程中更多的介入。这时候可以通过对 dojo 提供的 dojo.dnd.source

8、 和 dojo.dnd.target 进行继承扩展，开发满足业务需要的功能和特性。这里将不赘述。使用 html 5 创建拖拽应用在这一章中，我们将要使用 html 5 创建一个简单的拖拽应用，如图 1 所示，用户可以把网页上内容从左边的区域拖放到右边的区域。这个应用程序的代码可到附件中可以下载。图 1. html 5 拖拽应用效果图tnrset创建可以拖动的节点使用html 5创建拖拽只需要对可拖拽的节点进行声明一一给可以拖拽的节点添加draggable 属性并设值为true。如清单3中的div 节点，通过添加draggable 属性就可以拖拽了。在 html 5中img和a默认情况下是可以拖

9、拽的，所以不需要设 置 draggable 属性。清单3.通过添加draggable属性来创建源容器中可以拖动的节点1. <div id ="source" style ="height:300px;" >2. <div id ="item1" class ="item" draggable ="true" >item1 </div>3. <img id ="item2" src ="w3c.jpg" class

10、="item" ></img>4. <a id ="item3" href ="/tr/html5/"class ="item" > html5 specification </a>5. </div>创建html 5拖拽的源容器和目标容器在html 5中，我们需要给指定的节点来绑定一些事件来使之成为具有源容器或目标容器的功能。在 html 5的拖拽过程中的事件有7个，分别是应用在目标容器或拖动节点上的dragstart, drag

11、, dragend 等3个事件，以及应用在目标容器节点上的dragenter, dragover, dragleave 和drop等4个事件。表1中对这些事件的触发机制和常见的操作进行了描述。表1. html 5拖拽过程中可以绑定的事件聿件名薪发机制辨定节点对鹿的dojo事件方法常见舞作drag start当鼠标左键点击某个可施助节点开始施投 的,拖动的节点或凝容嘉上ondndstart*对d白七tran书fer的数据迸行初始1 初始化一些资源.drag当拖拽进行时在施找结更之前，在 5日g start之后b施动的节点或源 容器上.onmousamovs对拖动节点的位置信息进行处理.drag

12、enter拖动节点进入目标客累时.目标容器上.onouereyent对目标容器的样式迸行修改.dragover拖动节点在目标容疆上方时.目标容器上.ondraggingover判断拖动的节点是否裱目标节点菖draglaave拖劭节点离井目标客撰上方时.目赧客器上.cndragglngout对目标容器的样式送行修改.drop拖勃节点在目标容器上方杪开鼠标左建 时,目标容器上ondrop对口3丁3恬佗的数据进行处理工 口。m节点进行操作.drafletid卷开鼠标左建时，如drop事件触发.则 拖动的咕爸或麒 ondridcancel 释放在dragstart中创建的贺海口在drop事件之后口容器

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

14、op事件中我们要把拖动的节点插入到目标节点的dom结构中。清单4.创建目标容器的事件1. var target = dojo .byid('target');2. dojo.connect(target, 'dragover', function(e)3. / doesn't allows link item (id ="item3” )to drop4. if (e.datatransfer.getdata('id')!="item3")5. e.preventdefault();6. 7. )；8.9.

15、dojo.connect(target, 'dragenter',function(e)10. /add style11. dojo.addclass(target, "over");12. )；13.14. dojo.connect(target, 'dragleave', function()15. /remove style16. dojo.removeclass(target, "over");17. )；18.19. dojo.connect(target, 'drop', function(e)

16、20. /remove style if drop is successful21. dojo.removeclass(target, "over");22.23. / stops the browser from redirecting24. if (e.stoppropagation) e.stoppropagation();25.26.27. varitemid = e.datatransfer.getdata('id');28. vardragitem= dojo .byid(itemid);29. e.target.appendchild(drag

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

18、用的用途。庭队方沫驯用造题物正能需的d3事件淄申调用位掘物:驶(foiitafi炖曲在瞄版飒节而利stert事由笊中触说说嬲比-蟠解吸.('dfmat value)占小项小蜀g在爵娥福节点的d圆steit事件方法中腰荀?加防帧累j助掇世d则.此中磁物翔俅显示及 (eienent讣)off汩5用qff$etj朗胡可l凝瓶礴动中显示藤削城性璃隔但.w汨吸耽 延酹敏朝节醐蜘制事件斓牌im动口显示瓯左i啰或,灯加用印柳方击强不能 (e enenf.髓像聒区y胸的露低用和询d圆响a品法被th目尾 魂d网何研方法利的水市评题晨一勺飞亍翻)占杼含野img元案附用辐肥寸的茎或也横飘触球瓶揄与桌面进行交

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

20、nsfer.files;2. var msg =""3. for (var i = 0; i < files.length ; i+) 4. console.log ("name: " + + ", filesize:" + filesi.size);5. var datareader = new filereader();6. datareader.onload = function ()7. msg += ("content: " + datareader.result);8. 9

21、. datareader.readastext(filesi);10. 从清单5中的代码中我们可以看到files 中存储了若干file对象，通过这个对象可以获取文件名，文件大小等。然后我们可以通过filereader获取文件的内容。获取内容的 filereader 并不是html 5拖拽的功能，而是借助了 file api 。它可 以以文本，二进制，以及dataurl的形式读取，实现读取文件内容实现文件上传等， 在我们的示例代码 html5dndfile.html 中 我们演示了通过readastext方法读取文本文件和通过 readasdataurl方法读取图像文件的使用。与桌时行交互时，我

22、们只需要对将清单5中给出的代码稍加修改加到目标容器的drop事件中，其它事件不用修改。例如清单6所示。清单6.在目标容器的drop事件读取文本文件的内容1. dojo.connect(textdiv, 'drop', function(e)2. if (e.stoppropagation)3. e.stoppropagation(); / stops the browser from redirecting4. 5. varfiles= e.datatransfer.files;6. varmsg="" ;7. for (var i = 0; i <

23、files.length ; i+) 8. msg += ("name: " + filesi.filename + ", filesize: " + filesi.filesize);9. var datareader = new filereader();10. datareader.onload = function ()11. msg += ("content: " + datareader.result);12. textdiv.textcontent=msg;13. 14. datareader.readastext(filesi);15