The first task is to use Atlas markup to add drag-drop behavior to a div tag. By drag and drop, I just mean the ability to drag an object and the have it stay wherever you place it. The more complicated behavior of making an object actually do something when it is dropped on a specified drop target will be addressed later in this tutorial. To configure your webpage to use Atlas, you will need to download the Microsoft.Web.Atlas.dll file from the Microsoft site into your bin folder and configure your web.config file with the following entry:
<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>
You will need to add an Atlas Script Manager control to your .aspx page and configure it to use the AtlasUIDragDrop library file:
<atlas:ScriptManager ID=”ScriptManager1″ runat=”server”>
<Scripts>
<atlas:ScriptReference ScriptName=”AtlasUIDragDrop” />
</Scripts>
</atlas:ScriptManager>
Add the div object you want to make draggable, and make sure it has a drag handle:
<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>
Finally, add the markup script that will make your div draggable:
<script type=”text/xml-script”>
<page xmlns:script=”http://schemas.microsoft.com/xml-script/2005″>
<components>
<control id=”draggableDiv”>
<behaviors>
<floatingBehavior handle=”handleBar”/>
</behaviors>
</control>
</components>
</page>
</script>
And with that, you should have a draggable div tag. The example demonstrates the simplicity and ease of using the declarative model with Atlas. In the terminology being introduced with Atlas, you have just used declarative markup to add floating behavior to an HTML element.