brandnewbox.co.uk

Clicking on the yellow up and down arrows will raise or lower the item within its section.

The experiment started as an attempt to reorder <li>'s but was instantly flexible enough to be able to reorder other types of nodes. Hence, the sections can also be reordered, taking their children with them.

A couple of 'finds' that came in handy

The first was a swapNode prototype function for the Node object ( of which there were many around but I can't find the original source). This caused an error in IE/Win, but as IE already has this function we can call it with:

<script type="text/javascript; version=1.5" src="swapnode.js"></script>

to get around that.

Note: I've since found that this doesn't work very well across different browsers and have replaced it with a less clever, but more compatible swapNodes function

The second was this Whitespace in the DOM article that made it easier to find the correct sibling nodes to swap.

Other things

I'm using CSS to make a list with 2 columns to improve its appearance.

This could also quite easily used with the collapsable <ul> tree code here.

Comments

Commenting is not available in this weblog entry.