ASP.NET 2.0 結合 Atlas 實作滑鼠拖放功能完整指南

本文深入探討 Atlas 框架中宣告式程式設計與強制式程式設計的關係，並示範如何在 Web 客戶端實現拖放功能。下圖為本文範例程式執行結果快照。

執行結果

一、簡介

本文旨在協助讀者理解微軟 Atlas 技術的核心運作機制。Atlas 的設計目標是簡化 AJAX 風格的 Web 應用程式開發。然而，如同所有技術一樣，要善用這項工具，必須深入理解 Atlas 抽象層背後的技術細節。Atlas 抽象層的關鍵在於新的 XML 標記語法，旨在讓 Atlas 程式設計更加容易。透過 XML 標記，開發人員能以宣告式方式修改程式碼。但有時開發人員可能想以程式設計方式改變程式碼，此時就需要理解：在標記抽象層下，實際上是在與 JavaScript 及微軟開發的客製化 JavaScript 函式庫互動。

為了展示 Atlas 宣告式模型與可程式化模型之間的關係，我們將討論幾個範例，在這些範例中我們將使用兩種模型實現相同功能。我將示範如何使用 AtlasUIDragDrop 函式庫檔案來執行基本的拖放操作以及建立放置區域。

背景

撰寫本文時，Atlas 仍處於 Beta 測試階段，並持續更新中。文中範例適用於 Atlas 四月 CTP 版本；因此，Atlas 更新的發行版本可能會影響本文的準確性。另需注意，Atlas 僅能與 .NET 2.0 搭配運作。

二、宣告式拖放實作

要將拖放行為加入 div 標籤，第一步是使用 Atlas 標記。透過拖放，我們只想實現能拖曳物件並讓它停留在想放置的位置。當物件被放置到指定點時，實際開發中呈現的動作將在後續討論。

為了配置網頁以使用 Atlas，你需要從微軟網站下載 Microsoft.Web.Atlas.dll 到 bin 資料夾，並在 web.config 中加入以下設定：

<system.web>
<pages>
 <controls>
<add namespace="Microsoft.Web.UI"
assembly="Microsoft.Web.Atlas" tagPrefix="atlas"/>
<add namespace="Microsoft.Web.UI.Controls"
assembly="Microsoft.Web.Atlas" tagPrefix="atlas"/>
 </controls>
</pages>
</system.web>

接著，在 .aspx 頁面加入 Atlas ScriptManager 控制項，並使用 AtlasUIDragDrop 函式庫進行配置：

<atlas:ScriptManager ID="ScriptManager1" runat="server">
 <Scripts>
<atlas:ScriptReference ScriptName="AtlasUIDragDrop" />
 </Scripts>
</atlas:ScriptManager>

然後，加入想要設為可拖放的 div 物件，並確保它有一個拖放控制點：

<div style="background-color:Red;height:800px;width:600px;">
 <div id="draggableDiv"
style="height:100px;width:100px;background-color:Blue;">
<div id="handleBar"
style="height:20px;width:auto;background-color:Green;">
</div>
 </div>
</div>

最後，加入能讓 div 成為可拖放的標記腳本：

<script type="text/xml-script">
<page xmlns:script="https://schemas.microsoft.com/xml-script/2005">
 <components>
<control id="draggableDiv">
 <behaviors>
<floatingBehavior handle="handleBar"/>
 </behaviors>
</control>
 </components>
</page>
</script>

至此，你已擁有一個可拖放的 div 標籤。此範例展示了結合 Atlas 使用宣告式方式的簡單性與易用性。在 Atlas 引入的術語中，你僅使用宣告式標記將浮動行為加入 HTML 元素。