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 “
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:
which, in turn, can be written this way, using an Atlas script shorthand that replaces “document.getElementById()” with “$()”:
And once again, you have a draggable
div that behaves exactly the same as the draggable
div you wrote using the declarative model.