III. Dynamic Drag Drop

Since the declarative model is much cleaner than the imperative model, why would you ever want to write your own JavaScript to handle Atlas 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 = $(‘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 Atlas 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 = $(‘containerDiv’).appendChild(panel);

        addFloatingBehavior(panel, panelHandle);

    }

    function addFloatingBehavior(ctrl, ctrlHandle){

        var floatingBehavior = new Sys.UI.FloatingBehavior();

        floatingBehavior.set_handle(ctrlHandle);

        var dragItem = new Sys.UI.Control(ctrl);

        dragItem.get_behaviors().add(floatingBehavior);

        floatingBehavior.initialize();

    }

</script>

</head>

<body>

<form id=”form1″ runat=”server”>

<atlas:ScriptManager ID=”ScriptManager1″ runat=”server”>

    <Scripts>

        <atlas:ScriptReference ScriptName=”AtlasUIDragDrop” />

    </Scripts>

</atlas: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>

2 thoughts on “III. Dynamic Drag Drop”

Detailed item and comments on III. Dynamic Drag Drop. Not everybody can possess the identical thoughts or experience. I reckon I am in line with with this blogs perspective.An essay a day keeps the comments arriving.

Nowadays, there is a huge evolution in [url=http://www.gasgoo.com/auto-products/car_accessories_303/]car accessories[/url] industry. [url=http://www.gasgoo.com/hot/p-hand-brake.html]Hand brake[/url] is becoming safer. [url=http://www.gasgoo.com/auto-products/air-conditioner-561/
]Air conditioner[/url] system has greatly changed. For instance, air conditioner system used to have only air conditioner and [url=http://www.gasgoo.com/auto-products/air-filter-429/]air filter[/url], but now, the system also includes [url=http://www.gasgoo.com/auto-products/air-purifier-1003/]air purifier[/url]. Apart from, performance of [url=http://www.gasgoo.com/auto-products/fuel-pump-395/]fuel pump[/url] has enhanced as well as [url=http://www.gasgoo.com/auto-products/control-panel-355/]control panel[/url]. All in all, cars today are faster and easier to drive.

Comments are closed.