The first task is to use XML 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 ASP.NET Ajax, you will need to install the Microsoft.Web.Extensions.dll into your Global Assembly Cache. You will also need a reference to the library Microsoft.Web.Preview.dll. Finally, you will need to configure your web.config file with the following entry:
<system.web>
<pages>
<controls>
<add tagPrefix=”asp” namespace=”Microsoft.Web.UI” assembly=”Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″ />
<add tagPrefix=”asp” namespace=”Microsoft.Web.UI.Controls” assembly=”Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″/>
<add tagPrefix=”asp” namespace=”Microsoft.Web.Preview.UI” assembly=”Microsoft.Web.Preview” />
</controls>
</pages>
</system.web>
You will need to add an Atlas Script Manager control to your .aspx page and configure it to use the PreviewDragDrop library file:
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
<Scripts>
<asp:ScriptReference Name=”Microsoft.Web.Resources.ScriptLibrary.PreviewScript.js” />
<asp:ScriptReference Name=”Microsoft.Web.Resources.ScriptLibrary.PreviewDragDrop.js” />
</Scripts>
</asp: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 Ajax Extensions. In the terminology being introduced with Ajax Futures, you have just used declarative markup to add the floating behavior to an html element.
Well these entertaining points you have elaborated are really worth scanning and sharing, I must state the style in which you have written this information has genuinely aided me to deepen my standpoint around I ASP NET Ajax Declarative Drag and Drop. Keep the points coming. As the terminator said I will be back.