WEB STANDARDS CREATIVITY

Reorganizing modules
Expanding/collapsing is the easy part. What really puts a user in control is being able to dictate the layout of the modules
themselves. We’re going to allow users to grab a module by its title bar and drag it around—to move it up and down in its
container position, or swap it over to the other module area. Because the reorganization behavior is entirely separate from
the expand/collapse behavior, we can include it in a different file, modular.js, for easy maintenance.
Drag-and-drop event listeners
The first step in setting up our new behavior is to create the event listeners for the drag-and-drop actions:
addLoadListener(initModular);
function initModular()
{
var modules = [document.getElementById("modules1"), document.getElementById("modules2")];
for (var i = 0; i < modules.length; i++)
{
var h2s = modules[i].getElementsByTagName("h2");
for (var j = 0; j < h2s.length; j++)
{
addClass(h2s[j].parentNode, "moduleDraggable");
attachEventListener(h2s[j], "mousedown", mousedownH2, false);
}
}
return true;
};
We add another page load listener using addLoadListener(), but this time it’s calling initModular(), which, much like
initExpandCollapse(), iterates through the module areas, finding each of the h2 elements. For each h2, we then add a new
class, moduleDraggable, to its parent div and create a mousedown event listener on the h2. We place this class on the h2’s
parent div so that we can add in some styling tweaks once we know that JavaScript is enabled. We want to give the users a
hint that the module is movable (otherwise, they might not be aware of this fact), so we use this CSS rule in main.css:
.moduleDraggable h2
{
cursor: move;
}
This changes the cursor to a move cursor when the user hovers her
mouse over a draggable h2 element, as shown in Figure 9-12.
The function called by the mousedown listener on the h2 does a lot of
the work for the drag-and-drop behavior of the modules, by collecting
information and setting up variables:
function mousedownH2(event)
{
if (typeof event == "undefined")
{
Figure 9-12. The mouse cursor changes appearance
when it is hovered over a module’s title bar.
chapter 9 Creating Dynamic Interfaces Using JavaScript
231