在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è)致命的缺陷：

拖放功能只支持IE瀏覽器。

每次用戶通過拖放改變配件的位置之后，頁面總會(huì)自動(dòng)進(jìn)行回送以保存當(dāng)前的設(shè)定。

其中第一個(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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。