前端工程师-设计开发拖拽从Dojo到HTML5教学VIP专享VIP免费

第1页共8页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第1页共8页拖拽是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属性值第2页共8页第1页共8页编号：时间：2021年x月x日书山有路勤为径，学海无涯苦作舟页码：第2页共8页DojoDndItem。下面的示例代码定义了一个源容器Source以及一些可以拖动的元素。在这些可以拖动的元素中我们可以定义它们的拖拽类型dndType。dndType的值开发者可以自己定义，而目标容器Target元素的accept属性定义了该目标容器接受的拖拽类型。清单1.创建拖拽的源容器和可拖拽的元素1.2.item1