Tree, sortable by dragging things around

This treemenu to the left allows you to drag its nodes from one place to another. Much like the previous draggable table rows example, only the outer list element and the document itself have some events attached to them, enabling drag & drop behaviour for any element it contains; even (or rather especially) for dynamically added nodes, for instance via ajax.

When you click a node by its icon and start dragging it, its background color will indicate that it's the currently dragged node. A dashed line will indicate the new position of the node if you were to let go of it at that time. In this example the new position is always above the list item that is currently below the cursor, hence, you cannot directly drag something to the end of a list, but the other way around you wouldn't be able to drag something to the start ...

In an actual application you'd probably want to add dynamic actions (ajax) after a node has been dragged around, empty folders would need droptargets to be able to drag something into them, and you'd need to consider memory leakage, but this is only an example of course ;)

Peter Nederlof,