陳　骙

[摘 要]拖放引擎一直是AJAX技術(shù)的典型應(yīng)用之一,但由于其實(shí)現(xiàn)難度較大,所以多數(shù)開(kāi)發(fā)員選擇第三方框架實(shí)現(xiàn)該效果。因?yàn)槎鄶?shù)框架封裝了拖放引擎的底層實(shí)現(xiàn),使得不少人知其然不知其所以然。本文通過(guò)分析.NET AJAX Futures CTP中提供的拖放模型,深入探討了拖放引擎的實(shí)現(xiàn)機(jī)制。希望本文能對(duì)AJAX開(kāi)發(fā)員有所幫助。

[關(guān)鍵詞]AJAX 拖放引擎 JavaScript

一、了解工具及其作用

本文使用的工具是.NET AJAX Futures CTP。它是安裝在Visual Studio.NET 2005/2008中的一個(gè)工具包,其中包含了將在今后的ASP.NET AJAX版本中加入的額外特性[4]。雖然它能夠?qū)崿F(xiàn)拖放效果,但目前還沒(méi)有得到微軟的支持,也沒(méi)有對(duì)應(yīng)的文檔說(shuō)明。

盡管使用.NET AJAX Futures CTP不如其它框架方便,但對(duì)于了解拖放引擎的底層實(shí)現(xiàn)和內(nèi)部機(jī)制卻很有幫助。通過(guò)手動(dòng)編寫(xiě)代碼,可以加深對(duì)拖放引擎的理解。而且,雖然.NET AJAX Futures CTP沒(méi)有提供具體實(shí)現(xiàn)拖放引擎的工具,但卻給出了一個(gè)清晰的拖放引擎模型,使得開(kāi)發(fā)員有章可循。

二、.NET AJAX Futures CTP中拖放引擎的內(nèi)部機(jī)制分析

(一)構(gòu)成拖放引擎的要素

拋開(kāi)任何框架,僅從表面上來(lái)看,要想構(gòu)建拖放引擎,必須具備兩個(gè)要素,即:

1.可拖放項(xiàng)(draggable items)可以在頁(yè)面上拖動(dòng)的DOM元素。

2.投放區(qū)(drop zones)允許在其區(qū)域內(nèi)投放可拖動(dòng)項(xiàng)的DOM元素。

在.NET AJAX Futures CTP中實(shí)現(xiàn)拖放效果,必須手動(dòng)編寫(xiě)這兩個(gè)要素。

(二)NET AJAX Futures CTP拖放引擎模型

雖然許多工作需要我們自己來(lái)完成,但正如前所述,.NET AJAX Futures CTP提供了一個(gè)清晰的拖放引擎模型,使得我們有章可循。

一旦在頁(yè)面中啟用了.NET AJAX Futures CTP并引用了PreviewScript.js和PreviewDragDrop.js文件[5],則當(dāng)頁(yè)面加載時(shí),會(huì)自動(dòng)創(chuàng)建一個(gè)一個(gè)名叫DragDropManager的全局JavaScript對(duì)象并將其存儲(chǔ)在Sys.Preview.UI.DragDropManager全局變量中。DragDropManager對(duì)象是.NET AJAX Futures CTP拖放引擎的核心,負(fù)責(zé)管理可拖放項(xiàng)和投放區(qū)。它的主要任務(wù)是:注冊(cè)可拖放項(xiàng)和投放區(qū),并在拖放過(guò)程中的不同階段為它們提供反饋信息,同時(shí)協(xié)助二者進(jìn)行數(shù)據(jù)交互。

首先,注冊(cè)可拖放項(xiàng)和投放區(qū)。DragDropManager對(duì)象提供了兩個(gè)函數(shù)將頁(yè)面上的客戶組件注冊(cè)為可拖放項(xiàng)和投放區(qū)。這兩個(gè)函數(shù)分別是:startDragDrop()和registerDropTarget()。值得注意的是:這兩個(gè)函數(shù)需要手動(dòng)調(diào)用而且調(diào)用的時(shí)機(jī)不同。一般而言,投放區(qū)在頁(yè)面的位置是固定不變的,所以在初始化某客戶組件時(shí)即可調(diào)用registerDropTarget()函數(shù)將其注冊(cè)為投放區(qū)。而可拖放項(xiàng)則不同,它需要在拖放開(kāi)始的時(shí)候調(diào)用startDragDrop()函數(shù)表明“拖放操作已經(jīng)開(kāi)始”。例如,當(dāng)用戶在某圖片上按下鼠標(biāo)左鍵并拖動(dòng)鼠標(biāo)時(shí)拖放操作開(kāi)始,顯然,這時(shí)可以在mousedown事件的事件處理函數(shù)中調(diào)用startDragDrop()函數(shù)。其次,當(dāng)拖放操作開(kāi)始之后,DragDropManager對(duì)象要在拖放過(guò)程中為可拖放項(xiàng)和投放區(qū)提供反饋信息。為了接收反饋信息并對(duì)其進(jìn)行處理,可拖放項(xiàng)需要實(shí)現(xiàn)IDragSource接口,而投放區(qū)需要實(shí)現(xiàn)IDropTarget接口[6]。這兩個(gè)接口均位于Sys.Preview.UI命名空間中,它們提供了一組函數(shù),用于接收從DragDropManager對(duì)象傳來(lái)的反饋信息并進(jìn)行處理。這兩個(gè)接口也必須手動(dòng)實(shí)現(xiàn)。第三,除了視覺(jué)上的拖放效果外,可拖放項(xiàng)和投放區(qū)能夠進(jìn)行數(shù)據(jù)的交互。IDragSource接口和IDropTarget接口還提供了一組用于數(shù)據(jù)交互的函數(shù),可以使用它們?yōu)橥戏胚^(guò)程中的不同階段進(jìn)行數(shù)據(jù)處理。

綜上所述,實(shí)現(xiàn)一個(gè)拖放引擎的核心模型如下圖所示[7]

(三)實(shí)現(xiàn)拖放引擎的具體步驟

根據(jù)2.2所述的拖放引擎模型及其內(nèi)部關(guān)聯(lián)機(jī)制,我們可以總結(jié)出手動(dòng)實(shí)現(xiàn)拖放引擎的基本步驟:1.創(chuàng)建客戶組件;2.將客戶組件注冊(cè)為可拖動(dòng)項(xiàng)和投放區(qū);3.實(shí)現(xiàn)IDragSource接口和IDropTarget接口,完成對(duì)反饋信息的接收及拖放過(guò)程中的數(shù)據(jù)交互;4.在頁(yè)面上進(jìn)行集成。以上各步驟中,1.不是本文的重點(diǎn)[8],4.為進(jìn)行.NET AJAX編程的基本操作,但對(duì)于正真實(shí)現(xiàn)的拖放系統(tǒng)它們都是很重要的。

三、小結(jié)

本文論述了.NET AJAX Futures CTP中拖放引擎的內(nèi)部機(jī)制,并提供了實(shí)現(xiàn)一個(gè)簡(jiǎn)單拖放引擎的關(guān)鍵步驟,希望對(duì)學(xué)習(xí)和使用.NET AJAX框架的開(kāi)發(fā)員有所幫助。拖放引擎是一個(gè)相當(dāng)高級(jí)的AJAX主題,涉及了JavaScript的高級(jí)語(yǔ)法,創(chuàng)建客戶組件,客戶端頁(yè)面生命周期等一些高級(jí)技術(shù),僅僅一篇文章無(wú)法將這些內(nèi)容完全包含進(jìn)去。本文只是探討拖放引擎的內(nèi)部機(jī)制及實(shí)現(xiàn),如果想深入了解更多的AJAX高級(jí)特性,建議閱讀參考書(shū)目中的三本書(shū),相信它們會(huì)對(duì)您有巨大的幫助。

參考文獻(xiàn)

[1]JavaScript基礎(chǔ)教程 (美)Tom Negrino, Dori Smith 著

[2]深入淺出JavaScript (德)Christian Heilmann 著

[3]ASP.NET AJAX實(shí)戰(zhàn) (意)Alessandro Gallo (美)David Barkol (美)Rama Krishna Vavilala 著

[4]原有的Visual Studio.NET 2005/2008是不包含該工具包的。該工具包可以從http://ajax.asp.net下載,該官方網(wǎng)站還提供了安裝該工具包的詳細(xì)步驟

[5]這兩個(gè)文件作為Web資源嵌在Microsoft.Web.Preview.dll程序集中,可以在.NET AJAX Futures CTP的安裝目錄下找到它們

[6]本文中所提到的“類”,“對(duì)象”,“接口”,“命名空間”均是使用JavaScript模擬實(shí)現(xiàn),因?yàn)镴avaScript本身并沒(méi)有提供這些語(yǔ)法功能。具體可閱讀參考書(shū)目[3]

[7]該圖引自參考書(shū)目[3]

[8]創(chuàng)建客戶組件是相當(dāng)高級(jí)的。NET AJAX主題,本文從本質(zhì)上來(lái)說(shuō)就是在創(chuàng)建可拖放的客戶組件,所以本文建立在讀者已經(jīng)了解.NET AJAX客戶組件的基礎(chǔ)上