ASP.NET AJAX (Atlas) 拖放(Drag Drop)功能6种实现方法总结
在Ajax程序中實(shí)現(xiàn)傳統(tǒng)桌面程序中異常簡(jiǎn)單的拖放功能卻并不是件容易的事情。然而Web上的拖放功能又如此的讓人癡迷,所以幾乎每個(gè)成熟的Ajax類庫都提供了自己的一套實(shí)現(xiàn)拖放的封裝,ASP.NET AJAX (Atlas) 自然也不例外。本文將總結(jié)并簡(jiǎn)要分析ASP.NET AJAX (Atlas) 中拖放功能的6種不同的實(shí)現(xiàn)方法,希望能夠幫助朋友們選出最適合實(shí)際需求的方法。
其中第1到第4種方案,在我的《ASP.NET Ajax程序設(shè)計(jì)——第I卷:服務(wù)器端ASP.NET 2.0 AJAX Extensions與ASP.NET AJAX Control Toolkit》一書中有詳細(xì)介紹(4月出版),本文中的代碼和圖示也節(jié)選自該書。第5第6種方案,在我的《ASP.NET 2.0 Ajax程序設(shè)計(jì)——第II卷:客戶端Microsoft AJAX Library》一書中將有詳細(xì)介紹(暫定7月出版)。
不過縱觀這些解決方案,我很遺憾的發(fā)現(xiàn),要么是使用簡(jiǎn)單,可定制能力差,要么就是可定制能力強(qiáng),但使用起來要寫很多代碼。希望ASP.NET AJAX (Atlas) 團(tuán)隊(duì)能夠再接再厲,努力把這個(gè)重要功能做得更好。或者我有哪種方法漏掉了,也請(qǐng)朋友們幫忙補(bǔ)充一下。
?
[1] 使用服務(wù)器端DragOverlayExtender或客戶端DragOverlayBehavior
服務(wù)器端的DragOverlayExtender就是靠著客戶端DragOverlayBehavior而實(shí)現(xiàn)的,前者是后者在服務(wù)器端的組件化封裝,所以我們將二者放在一起討論。
這個(gè)“拖放”功能很簡(jiǎn)單,其實(shí)這只是個(gè)“拖拽”,而沒有“投放”。也就是說,你可以隨意將某個(gè)Panel在頁面中拖來拖去,不過卻沒有什么固定的地方可以“投放”,就像在Windows桌面上拖放某個(gè)窗口的位置一樣——其實(shí)用處不大,也沒有提供什么可定制能力。但它使用起來非常簡(jiǎn)單,也支持將Panel的位置保存在Profile中。
下面是一段DragOverlayExtender的示例代碼,至于DragOverlayBehavior的用法,請(qǐng)查看DragOverlayExtender頁面生成的HTML代碼:
<asp:Login ID="floatLogin" BackColor="white" BorderStyle="Solid" BorderColor="black" runat="server"></asp:Login><asp:DragOverlayExtender ID="DragOverlayExtender2" Enabled="true" TargetControlID="floatLogin" runat="server" />效果如下:
?
[2] 使用服務(wù)器端DragPanel
DragPanel是ASP.NET AJAX Control Toolkit中的一個(gè)擴(kuò)展器控件。其功能基本與DragOverlayExtender和DragOverlayBehavior一樣,且同樣可以保存Panel的位置信息至Profile中。不同之處在于,DragOverlayExtender和DragOverlayBehavior的拖拽實(shí)現(xiàn)方式中,鼠標(biāo)放在整個(gè)Panel的任何部分都可以開始拖拽,而DragPanel在進(jìn)行拖拽時(shí),只有鼠標(biāo)放在指定的DragHandle(類似于Windows窗口的標(biāo)題欄部分)中才能開始拖拽。
對(duì)于DragHandle的擴(kuò)展性和實(shí)用性,同樣不敢恭維。
下面是一段示例代碼:
<asp:Panel ID="floatPanel" CssClass="floatPanel" runat="server"> <asp:Panel ID="floatPanelHandle" CssClass="handle" runat="server"> 窗口的拖動(dòng) </asp:Panel> <div class="content"> 在Windows中,對(duì)窗口的拖動(dòng)似乎成了我們習(xí)以為常的事情。 ……………… ……………… Window窗口的表現(xiàn)行為一樣。 </div></asp:Panel><ajaxToolkit:DragPanelExtender ID="dpe" TargetControlID="floatPanel" DragHandleID="floatPanelHandle" runat="server"></ajaxToolkit:DragPanelExtender>效果如下:
?
[3] 使用服務(wù)器端ReorderList
ASP.NET AJAX Control Toolkit中的ReorderList控件將在頁面中呈現(xiàn)出一個(gè)由數(shù)據(jù)綁定自動(dòng)生成的條目列表。用戶可以通過鼠標(biāo)拖動(dòng)某一項(xiàng)來直接改變?cè)摿斜碇袟l目彼此之間的相對(duì)位置關(guān)系,且在拖動(dòng)的過程中,ReorderList控件提供了豐富的、可定制的視覺效果。當(dāng)用戶在某個(gè)位置放開鼠標(biāo)之后,ReorderList控件也將同樣會(huì)自動(dòng)通知與其綁定的數(shù)據(jù)源控件,以Ajax的異步或整頁回送的同步方式更新服務(wù)器端數(shù)據(jù)。
ReorderList控件的使用比較簡(jiǎn)單(服務(wù)器端控件),功能也相當(dāng)?shù)呢S富,擴(kuò)展能力也不錯(cuò)。不過仍稱不上最靈活,比如我們想把條目在多個(gè)ReorderList之間拖放,那么就沒辦法實(shí)現(xiàn)了——因此,不要指望它能實(shí)現(xiàn)WebPart那樣的功能。
詳細(xì)介紹請(qǐng)參考:《使用ASP.NET AJAX Control Toolkit中的ReorderList控件實(shí)現(xiàn)用鼠標(biāo)拖動(dòng)改變條目順序》
下面是一段示例代碼:
<ajaxToolkit:ReorderList ID="musicList" CssClass="musicList" DragHandleAlignment="Left" PostBackOnReorder="false" DataSourceID="musicDataSource" DataKeyField="Id" SortOrderField="Order" runat="server"> <ItemTemplate> <ajaxToolkit:Rating ID="rating" runat="server" CssClass="rating" StarCssClass="ratingStar" FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar" CurrentRating='<%# Bind("Rating") %>' MaxRating="5" ReadOnly="true"> </ajaxToolkit:Rating> </ItemTemplate> <ReorderTemplate> <div class="dragDue"> Drop Here! </div> </ReorderTemplate> <DragHandleTemplate> <asp:Label ID="lbTitle" CssClass="dragHandle" ToolTip="Drag Me!" runat="server" Text='<%# Bind("Name") %>'> </asp:Label> </DragHandleTemplate></ajaxToolkit:ReorderList>效果挺酷的:
?
[4] 使用UpdatePanel與ASP.NET AJAX中的新版本W(wǎng)ebPart控件
ASP.NET 2.0中的WebPart相關(guān)的控件雖然非常豐富,易于使用且功能強(qiáng)大,我們?cè)诔绦蛑幸埠苄枰峁┑耐献Чδ?#xff0c;但它卻存在著兩個(gè)致命的缺陷:
其中第一個(gè)問題可以通過ASP.NET AJAX中的新版本W(wǎng)ebPart控件搞定,第二個(gè)問題可以通過添加UpdatePanel搞定,本來在CTP版本中的ASP.NET AJAX里面,這些功能均已經(jīng)完美實(shí)現(xiàn)了。誰知道在最新的Futures CTP中,卻又不好用了。
既然現(xiàn)在已經(jīng)不能用了,也就沒必要分析其優(yōu)點(diǎn)缺點(diǎn)了。不過還是給出一張截圖吧,緬懷一下曾經(jīng)的輝煌(注意,這可是在Firefox中啊!)……
?
[5] 使用客戶端DragDropList
DragDropList定義于ASP.NET AJAX Futures CTP中,功能非常強(qiáng)大,且全部在客戶端實(shí)現(xiàn),給服務(wù)器端減輕了不少的壓力。使用DragDropList實(shí)現(xiàn)第4種解決方案中的WebPart類似的效果完全沒有問題,不過唯一讓人感到遺憾的就是,其擴(kuò)展功能不是很好,用戶雖然可以隨便將某個(gè)Panel從一個(gè)區(qū)域拖到另一個(gè)區(qū)域,但拖拽的結(jié)果卻很難持久化下來……且使用起來也不是那么的容易,效率上更是不敢恭維……總之,這是個(gè)很讓人矛盾的東西,有些雞肋的感覺。
我曾經(jīng)在《使用ASP.NET Atlas實(shí)現(xiàn)拖放(Drag & Drop)效果(下)》這篇文章中給出過DragDropList的示例程序,雖然是基于CTP版本的ASP.NET AJAX ,不過實(shí)際上并不需要多少修改就能運(yùn)行于最新版本之上。感興趣的朋友可以看看,也可以到官方論壇上搜索一下相關(guān)的主題。
?
[6] 在客戶端自行實(shí)現(xiàn)IDragSource和IDropTarget接口
來到了這個(gè)解決方案,可以說你對(duì)ASP.NET AJAX中的拖拽實(shí)現(xiàn)有了一個(gè)較深入的了解。上面的DragDropList其實(shí)就是實(shí)現(xiàn)了IDragSource和IDropTarget接口,其中前者用來定義可以被拖拽的項(xiàng)目,后者用來定義可以被投放的區(qū)域。詳細(xì)理論上的說明,可以參考我的文章《使用ASP.NET Atlas實(shí)現(xiàn)拖放(Drag & Drop)效果(上)》,雖然目前已經(jīng)有所變化,不過仍可以參考。
這種實(shí)現(xiàn)方案應(yīng)該說是最為強(qiáng)大的了,想要什么功能,肯定都能實(shí)現(xiàn)。不過實(shí)際開發(fā)中的難度也不小——甚至可以說是相當(dāng)復(fù)雜,Jeff Prosise的這篇文章《Implementing Drag-Drop in ASP.NET AJAX》給出了一個(gè)非常簡(jiǎn)單的示例程序,感興趣想要學(xué)習(xí)的朋友不妨看看……
轉(zhuǎn)載于:https://www.cnblogs.com/dflying/archive/2007/03/26/687809.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯,堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的ASP.NET AJAX (Atlas) 拖放(Drag Drop)功能6种实现方法总结的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【转】C++类的sizeof大小
- 下一篇: Microsoft .NET Pet S