Developing Web Components

Chapter 5. Cloning Nodes

Jason Strimpel

Frequently when you see a drag-and-drop interface on the Web, nodes are being cloned—that is, copies of the original nodes are being made (using the cloneNode method, described in the next section). This is done because it is more efficient to clone the node that is being dragged than it would be to detach it from its original location in the DOM, reattach it, and then move it. This is especially true in the case where a user tries to drop the node outside of the defined drop target—the cloned node is deleted and the original node is then shown again, without having to be detached and reattached. If the cloned node is successfully dropped into the target node, then it remains, and the original node is deleted. Cloning can also be useful in the case where you do not want the original node to be removed or hidden until the cloned node is dropped into a target.

Another use case in which cloning is useful is for copying nodes. For instance, an interface may need to provide the functionality for classifying items by one or more characteristics. This functionality could be accomplished by creating an interface that allows a user to drop items into different drop targets, which could be easily accomplished by cloning nodes.

A third use case is that you want to perform some calculations based on a node’s dimensions. For instance, if the node contains text of an unknown length that needs to be truncated in a unique fashion—e.g., the beginning ...