What are we doing
I need to build a list where a user should be able to sort the elements by moving up or down an element. To do so I want to present the elements in a table similar to this:
<table> <tbody> <tr> <td>1</td><td class="up">up</td><td class="down">down</td> </tr> <tr> <td>2</td><td class="up">up</td><td class="down">down</td> </tr> <tr> <td>3</td><td class="up">up</td><td class="down">down</td> </tr> <tr> <td>4</td><td class="up">up</td><td class="down">down</td> </tr> </tbody> </table>
To keep things simple I want the user to click on td.up to move the row up or on td.down to move the row down.
Moving the rows
To help me do that I use the Prototype JavaScript library.
<script type="text/javascript" src="js/prototype.js"></script>
So when the page load I attach a function to the click event of each td.up and each td.down.
Event.observe(window, "load", function() {
$$("td.up").each(function(element) {
element.observe("click", up)
});
$$("td.down").each(function(element) {
element.observe("click", down)
});
});
Move up
To move an element up in the table I remove the row before the row the user clicked on and I insert it after the row the user clicked on.
function up(event) {
var element = event.element().ancestors()[0];
var previous = element.previous();
if (previous) {
previous.remove();
element.insert({after:previous});
}
}
Move down
To move an element up in the table I remove the row after the row the user clicked on and I insert it before the row the user clicked on.
function down(event) {
var element = event.element().ancestors()[0];
var next = element.next();
if (next) {
next.remove();
element.insert({before:next});
}
}
The complete example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
td {
border:1px solid black;
}
td.up {
cursor:pointer;
}
td.down {
cursor:pointer;
}
</style>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript">
Event.observe(window, "load", function() {
$$("td.up").each(function(element) {
element.observe("click", up)
});
$$("td.down").each(function(element) {
element.observe("click", down)
});
});
function up(event) {
var element = event.element().ancestors()[0];
var previous = element.previous();
if (previous) {
previous.remove();
element.insert({after:previous});
}
}
function down(event) {
var element = event.element().ancestors()[0];
var next = element.next();
if (next) {
next.remove();
element.insert({before:next});
}
}
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td>1</td><td class="up">up</td><td class="down">down</td>
</tr>
<tr>
<td>2</td><td class="up">up</td><td class="down">down</td>
</tr>
<tr>
<td>3</td><td class="up">up</td><td class="down">down</td>
</tr>
<tr>
<td>4</td><td class="up">up</td><td class="down">down</td>
</tr>
</tbody>
</table>
</body>
</html>
Cheers :-)
Advertisement
[...] — Tags: JavaScript, Prototype, Scriptaculous — Sébastien Ayotte @ 3:24 pm In my previous article I built a list where a user is able to move a table row up or down by clicking on a up icon and a [...]
Pingback by Scriptaculous Sortable List Example « Sébastien’s Coding Journey — December 28, 2010 @ 3:24 pm