WEB STANDARDS CREATIVITY

238
ghostMarker.marked.appendChild(dragTarget);
}
else
{
ghostMarker.marked.parentNode.insertBefore(dragTarget, ghostMarker.marked);
}
ghostMarker.parentNode.removeChild(ghostMarker);
}
return true;
};
Most of the heavy lifting has already been done, so this function just tidies things up. First, it removes the mousemove event
listener from the document, as we no longer need to know when the user is moving the mouse. After that, we remove the
ghost element, as we want to stop displaying the copy.
Then we decide where to place the dragged module. If ghostMarker still exists, it means that the user released the mouse
button when there was a valid place to move the dragged module. Using the ghostMarker.marked property, we can see
which element to insert the dragged module before. We need to check whether the marked module is actually a module, or
whether it was the extra placeholder we put in for the end of the module area. If it’s an actual module (it has a class of
module), we can use the insertBefore() method to move the dragged module before the marked module. If it was a module
area, we use appendChild() to place the dragged module at the end of the area. Either way, we remove the ghost
marker, and the dragged module now ends up in its new location, just where the user wanted! If ghostMarker no longer
exists, we know that there’s nowhere for the dragged module to move to, so we can quietly finish.
Figure 9-15 shows the whole process of a user dragging a module from one module area to another.
a. b.
Figure 9-15 (a-d). Dragging a module to another module area
➤ ➤