Reorder HTML Lists With Prototype
/skill level/
/viewed/
0 Times
This code reorders elements, or in this case a list of Rambo movies, using the Prototype JavaScript framework. This code was written for use in Adam DuVander's Get Started With Prototype tutorial.
Since this code depends on the Prototype JavaScript framework to run, you'll need a copy of the Prototype JavaScript library.
This code is in a wiki. If you have any advances to make to the original tutorial and code, please feel free to contribute.
The Code
<html>
<head>
<title>Testing Prototype</title>
<script src="prototype.js"></script>
<style>
div
{
padding: 10px;
margin: 5px;
border: 1px solid black;
width: 75%;
}
</style>
<script>
document.observe('dom:loaded', function() {
$$('ol#rambolist li').each(function(elmt) {
elmt.observe('click', function(ev) {
var listitem = ev.target;
var aboveitems = listitem.previousSiblings();
if (aboveitems.length > 0)
{
var itemtext = aboveitems[0].innerHTML;
aboveitems[0].innerHTML = listitem.innerHTML;
listitem.innerHTML = itemtext;
}
});
});
});
</script>
</head>
<body>
<ol id="rambolist">
<li>First Blood (1982)</li>
<li>Rambo: First Blood Part II (1985)</li>
<li>Rambo III (1988)</li>
<li>Rambo (2008)</li>
</ol>
</body>
</html>
What it Looks Like
- This page was last modified 19:32, 3 October 2008.