II. Imperative Drag Drop

To accomplish the same thing using a programmatic model requires a bit more code, but not much more. It is important to understand that when you add an Atlas Script Manager component to your page, you are actually giving instructions to have the Atlas JavaScript library loaded into your page. The Atlas library, among other things, provides client-side classes that extend the DOM, and provide you with tools that allow you to code in a browser agnostic manner (though there currently are still issues with Safari compatibility). These client-side classes also allow you to add behaviors to your HTML elements.

To switch to an imperative model, you will need to replace the XML markup with two JavaScript functions. The first one is a generic script to add floating behavior to an HTML element. It leverages the Atlas client-side classes to accomplish this:

<script type="text/javascript">
function addFloatingBehavior(ctrl, ctrlHandle){
    //create new floating behavior object
    var floatingBehavior = new Sys.UI.FloatingBehavior();
    //floating behavior class has a Handle property
    floatingBehavior.set_handle(ctrlHandle);
    //convert object reference to Atlas client control
    var dragItem = new Sys.UI.Control(ctrl);
    //get behaviors collection from Atlas control 
    //and add our floating behavior
    dragItem.get_behaviors().add(floatingBehavior);
    //run the floating behavior's internal javascript
    floatingBehavior.initialize();
}
</script>

The function takes two parameter values: the HTML element that you want to make draggable, and the HTML element that is the drag handle for the dragging behavior. Next, you instantiate a new Atlas client-side behavior object. The floating behavior has a property called “handle“, to which you pass the handle HTML element. You then need to create a new client-side control object based on the control you want to make draggable. Turning your div tag into an Atlas client-side control enables you to add Atlas behaviors to it. You use the “get_behaviors()” method to return a collection of behaviors, and the add method to add a new behavior to your HTML object. Finally, you call the “initialize()" method of the behavior object to allow the behavior to configure itself internally. This utility function will be used throughout the rest of this tutorial.

Now, you need to call the “addFloatingBehavior” function when the page loads. This, surprisingly, was the hardest part about coding this example. The Script Manager doesn’t simply create a reference to the Atlas JavaScript libraries, and I have read speculation that it actually loads the library scripts into the DOM. In any case, what this means is that the libraries get loaded only after everything else on the page is loaded. The problem for us, then, is that there is no standard way to make our code that adds the floating behavior run after the libraries are loaded; and if we try to run it before the libraries are loaded, we simply generate JavaScript errors, since all of the Atlas methods we call can’t be found.

There are actually a few workarounds for this, but the easiest one is to use a custom Atlas event called “pageLoad()” that actually only gets called after the libraries are loaded. To add the floating behavior to your div tag, when the page is first loaded (but after the library scripts are loaded), you just need to write the following:

<script type="text/javascript">
    function pageLoad(){
        addFloatingBehavior(document.getElementById('draggableDiv'), 
                            document.getElementById('handleBar'));
    }
</script>

which, in turn, can be written this way, using an Atlas script shorthand that replaces “document.getElementById()” with “$()”:

<script type="text/javascript">
    function pageLoad(){
        addFloatingBehavior($('draggableDiv'),$('handleBar'));
    }
</script>

And once again, you have a draggable div that behaves exactly the same as the draggable div you wrote using the declarative model.