III. ASP.NET Ajax Dynamic Drag and Drop

Since the declarative model is much cleaner than the imperative model, why would you ever want to write your own javascript to handle Ajax Extensions behaviors? You might want to roll your own javascript if you want to add behaviors dynamically. One limitation of the declarative model is that you can only work with objects that are initially on the page. If you start adding objects to the page dynamically, you cannot add the floating behavior to them using the declarative model. With the imperative model, on the other hand, you can.

Building on the previous example, you will replace the “pageLoad()” function with a function that creates floating divs on demand. The following javascript function will create a div tag with another div tag embedded to use as a handlebar, then insert the div tag into the current page, and finally add floating behavior to the div tag:

function createDraggableDiv() {

    var panel= document.createElement(“div”);

    panel.style.height=“100px”;

    panel.style.width=“100px”;

    panel.style.backgroundColor=“Blue”;

    var panelHandle = document.createElement(“div”);

    panelHandle.style.height=“20px”;

    panelHandle.style.width=“auto”;

    panelHandle.style.backgroundColor=“Green”;

    panel.appendChild(panelHandle);

    var target = $get(‘containerDiv’).appendChild(panel);

    addFloatingBehavior(panel, panelHandle);

}

You will then just need to add a button to the page that calls the “createDraggableDiv()” function. The new HTML body should look something like this:

<input type=”button” value=”Add Floating Div” onclick=”createDraggableDiv();” />

<div id=”containerDiv” style=”background-color:Purple;height:800px;width:600px;”/>

This will allow you to add as many draggable elements to your page as you like, thus demonstrating the power and flexibility available to you once you understand the relationship between using Ajax Extensions declaratively and using it programmatically. As a point of reference, here is the complete code for the dynamic drag and drop example:

<%@ Page Language=”C#” %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
<title>Imperative Drag and Drop II</title>
<script type=”text/javascript”>
function createDraggableDiv() {
     var panel = document.createElement(“div”);
     panel.style.height=”100px”;
     panel.style.width=”100px”;
     panel.style.backgroundColor=”Blue”;
     var panelHandle = document.createElement(“div”);
     panelHandle.style.height=”20px”;
     panelHandle.style.width=”auto”;
     panelHandle.style.backgroundColor=”Green”;
     panel.appendChild(panelHandle);
     var target = $get(‘containerDiv’).appendChild(panel);
     addFloatingBehavior(panel, panelHandle);
     }
function addFloatingBehavior(ctrl, ctrlHandle){
     $create(Sys.Preview.UI.FloatingBehavior, {‘handle’: ctrlHandle}, null, null, ctrl);
     }
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<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>
<h2>Imperative Drag and Drop Code with javascript: demonstrate dynamic loading of behaviors</h2>
<input type=”button” value=”Add Floating Div” onclick=”createDraggableDiv();” />
<div id=”containerDiv” style=”background-color:Purple;height:800px;width:600px;”/>
</form>
</body>
</html>

One thought on “III. ASP.NET Ajax Dynamic Drag and Drop”

sheets bedding January 5, 20119:41 am

It does look that many folks are into this type of content lately as you present in III ASP NET Ajax Dynamic Drag and Drop. Do not genuinely comprehend it though, however thanks for attempting to explain it. Appreciate you spilling light into this thing. Keep sparking opinions in others! I really value the way you have published this.

Comments are closed.