使用ASP.NET Atlas實現拖放（Drag & Drop）效果（上）

English Version: http://dflying.dflying.net/1/archive/77_atlas_drag__drop_overview.html
中文版：http://dflying.cnblogs.com/archive/2006/04/21/381763.html
請同時參考：使用ASP.NET Atlas實現拖放（Drag & Drop）效果（下）

題外話

This English Version is posted by me at my English blog http://dflying.dflying.net  for more that two months. So some of the features may be out of date now, such as the old Web Namespace and the demo code. I may update it in the coming days but at this moment for English readers, please just be a little patient.

這篇文章的英文版兩個多月前發布在我的英文Blog：http://dflying.dflying.net上。所以現在其中的有些內容已經過時了，例如曾經的“Web”命名控制項以及附帶的樣本程式。我會找時間更新一下，但目前對於英文讀者，還請略微耐心一些。

本文曾被吳飛(Felix)翻譯成中文，在此表示感謝！他（她）的版本請見：http://www.felixwoo.com/article.asp?id=171

本文

ASP.NET Atlas提供了一個簡單易用而又強大的跨瀏覽器的拖放功能的實現。Atlas的拖放功能實現位於AtlasUIDragDrop.js檔案中，感興趣的朋友可以學習一下它的實現，當然，這部分內容不在本文的範圍之內（今後應該會有所介紹，希望我不會懶）。

基本上，Atlas中可拖放的UI由如下兩個部分實現：

1. 可拖動的對象以及投放目標對象。可拖動的對象就是在頁面中可以被滑鼠移動的DOM元素（例如網上商城中的物品），而投放目標對象則是頁面中可以接收可拖動對象的，作為容器的DOM元素（例如網上商城中的購物車）。Atlas允許您通過實現IDragSource介面來定義自己的可拖動對象，實現IDropTarget介面來定義自己的投放目標對象。當然您可以同時實現上述兩個介面（比如，您希望使用者可以在頁面上自由拖動並安排購物車的位置）。
2. 一個DragDropManager對象。DragDropManager是一個全域對象，將在運行時被自動初始化（當然，您需要在ScriptManager中顯示聲明引用AtlasUIDragDrop指令碼）。您可以使用Sys.UI.DragDropManager訪問到它。它的主要功能是通過調用IDragSource以及IDropTarget介面提供的方法來啟動拖放操作以及註冊投放目標對象。通常情況下，您不需要考慮太多關於DragDropManager的事情。

這樣，通常情況下使用Atlas建立可拖放的UI有如下兩個步驟：

1. 通過實現IDragSource介面來建立可拖動的對象，實現IDragSource介面的對象應該負責調用DragDropManager的startDragDrop()方法以開始拖動的操作（通常這個步驟應該放在處理mouse down事件中實現）。每個可拖動的對象都有自己的dataType屬性，可以用來定義相同類型拖放對象。
2. 通過實現IDropTarget介面來建立投放目標對象，實現IDropTarget介面的對象應該在DragDropManager中調用registerDropTarget()註冊自己。每個投放目標對象都有自己的acceptedDataTypes屬性，用來指定該投放目標對象可以接受何種dataType屬性的可拖動對象。

總體上，拖放操作開始於一個可拖動對象調用DragDropManager的startDragDrop()方法，然後，DragDropManager接管了其它的操作，它將負責調用可拖動對象的IDragSource介面方法以及投放目標對象的IDropTarget介面方法來協調二者的關係，以及相應的UI變化。

Atlas提供了一些內建的實現了IDragSource以及IDropTarget介面的Behavior（關於Behavior，請參考：在ASP.NET Atlas中建立自訂的Behavior）供我們使用。顯然，下列用戶端Behavior都實現了IDragSource或IDropTarget介面中的至少一個。

1. DragDropList Behavior可以為一組控制項增加拖放功能。典型應用就是使ListView控制項（關於ListView，請參考：使用ASP.NET Atlas ListView控制項顯示列表資料）實現拖放功能。
2. DraggableListItem Behavior可以在一個DragDropList中定義一個拖動對象。可以應用在ListView的ItemTemplate上，使列表中的每一項都可以拖動。
3. DataSourceDropTarget Behavior用來把資料通過拖放的方式加入到DataSource控制項（關於DataSource，請參考：Atlas命名空間Sys.Data下控制項介紹——DataSource和XMLDataSource）中。
4. FloatingBehavior Behavior可以使某個控制項浮動在頁面上，並可隨意移動。

在下篇中我將通過一個樣本程式來示範拖放（Drag & Drop）效果的實現：使用ASP.NET Atlas實現拖放（Drag & Drop）效果（下）