．ＮＥＴＡＪＡＸ拖放引擎内部机制分析

1、    拖放引擎内部机制分析    陈骙摘 要拖放引擎一直是ajax技术的典型应用之一,但由于其实现难度较大,所以多数开发员选择第三方框架实现该效果。因为多数框架封装了拖放引擎的底层实现,使得不少人知其然不知其所以然。本文通过分析.net ajax futures ctp中提供的拖放模型,深入探讨了拖放引擎的实现机制。希望本文能对ajax开发员有所帮助。关键词ajax 拖放引擎 javascript一、了解工具及其作用本文使用的工具是.net ajax futures ctp。它是安装在visual studio.net 2005/2008中的一个工具包

2、,其中包含了将在今后的asp.net ajax版本中加入的额外特性4。虽然它能够实现拖放效果,但目前还没有得到微软的支持,也没有对应的文档说明。尽管使用.net ajax futures ctp不如其它框架方便,但对于了解拖放引擎的底层实现和内部机制却很有帮助。通过手动编写代码,可以加深对拖放引擎的理解。而且,虽然.net ajax futures ctp没有提供具体实现拖放引擎的工具,但却给出了一个清晰的拖放引擎模型,使得开发员有章可循。二、.net ajax futures ctp中拖放引擎的内部机制分析(一)构成拖放引擎的要素抛开任何框架,仅从表面上来看,要想构建拖放引擎,必须具备两个要

3、素,即:1.可拖放项(draggable items)可以在页面上拖动的dom元素。2.投放区(drop zones)允许在其区域内投放可拖动项的dom元素。在.net ajax futures ctp中实现拖放效果,必须手动编写这两个要素。(二)net ajax futures ctp拖放引擎模型虽然许多工作需要我们自己来完成,但正如前所述,.net ajax futures ctp提供了一个清晰的拖放引擎模型,使得我们有章可循。一旦在页面中启用了.net ajax futures ctp并引用了previewscript.js和previewdragdrop.js文件5,则当页面加载时,会

4、自动创建一个一个名叫dragdropmanager的全局javascript对象并将其存储在sys.preview.ui.dragdropmanager全局变量中。dragdropmanager对象是.net ajax futures ctp拖放引擎的核心,负责管理可拖放项和投放区。它的主要任务是:注册可拖放项和投放区,并在拖放过程中的不同阶段为它们提供反馈信息,同时协助二者进行数据交互。首先,注册可拖放项和投放区。dragdropmanager对象提供了两个函数将页面上的客户组件注册为可拖放项和投放区。这两个函数分别是:startdragdrop()和registerdroptarget()

5、。值得注意的是:这两个函数需要手动调用而且调用的时机不同。一般而言,投放区在页面的位置是固定不变的,所以在初始化某客户组件时即可调用registerdroptarget()函数将其注册为投放区。而可拖放项则不同,它需要在拖放开始的时候调用startdragdrop()函数表明“拖放操作已经开始”。例如,当用户在某图片上按下鼠标左键并拖动鼠标时拖放操作开始,显然,这时可以在mousedown事件的事件处理函数中调用startdragdrop()函数。其次,当拖放操作开始之后,dragdropmanager对象要在拖放过程中为可拖放项和投放区提供反馈信息。为了接收反馈信息并对其进行处理,可拖放项需

6、要实现idragsource接口,而投放区需要实现idroptarget接口6。这两个接口均位于sys.preview.ui命名空间中,它们提供了一组函数,用于接收从dragdropmanager对象传来的反馈信息并进行处理。这两个接口也必须手动实现。第三,除了视觉上的拖放效果外,可拖放项和投放区能够进行数据的交互。idragsource接口和idroptarget接口还提供了一组用于数据交互的函数,可以使用它们为拖放过程中的不同阶段进行数据处理。综上所述,实现一个拖放引擎的核心模型如下图所示7(三)实现拖放引擎的具体步骤根据2.2所述的拖放引擎模型及其内部关联机制,我们可以总结出手动实现拖放

7、引擎的基本步骤:1.创建客户组件;2.将客户组件注册为可拖动项和投放区;3.实现idragsource接口和idroptarget接口,完成对反馈信息的接收及拖放过程中的数据交互;4.在页面上进行集成。以上各步骤中,1.不是本文的重点8,4.为进行.net ajax编程的基本操作,但对于正真实现的拖放系统它们都是很重要的。三、小结本文论述了.net ajax futures ctp中拖放引擎的内部机制,并提供了实现一个简单拖放引擎的关键步骤,希望对学习和使用.net ajax框架的开发员有所帮助。拖放引擎是一个相当高级的ajax主题,涉及了javascript的高级语法,创建客户组件,客户端页

8、面生命周期等一些高级技术,仅仅一篇文章无法将这些内容完全包含进去。本文只是探讨拖放引擎的内部机制及实现,如果想深入了解更多的ajax高级特性,建议阅读参考书目中的三本书,相信它们会对您有巨大的帮助。参考文献1javascript基础教程 (美)tom negrino, dori smith 著2深入浅出javascript (德)christian heilmann 著3asp.net ajax实战 (意)alessandro gallo (美)david barkol (美)rama krishna vavilala 著4原有的visual studio.net 2005/2008是不包含该工具包的。该工具包可以从下载,该官方网站还提供了安装该工具包的详细步骤5这两个文件作为web资源嵌在microsoft.web.preview.dll程序集中,可以在.net ajax futures ctp的安装目录下找到它们6本文中所提到的“类”,“对象”,“接口”,“命名空间”均是使用javascript模拟实现,因为javascript本身并没有提供这些语法功能。具体可阅读参考书目37该图引自参考书目38创建客户组件是相当高级的。net ajax主题,本文从本质上来说就是在创建可拖放的客户组件,所以本文建立在读