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 down icon associated to the row. The thing is that I want the user to be able to sort a priority list by moving the items in the list. It’s working quite well but I don’t like the fact that the mouse’s cursor don’t follow the row when the up or down icon is clicked. I find it quite disturbing for the user. So I decided to take an other approach.
What are we doing
In this article I will use Scriptaculous to make the items of a list draggable.
The list
I will make the following list draggable.
<ul id="list"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ul>
The librairies
To make the items in the list draggable I also need Prototype.
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js"></script>
Applying the effect
The last thing we need is to create a sortable list with Scriptaculous.
Event.observe(window, 'load', function() {
Sortable.create("list");
});
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>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript">
Event.observe(window, 'load', function() {
Sortable.create("list");
});
</script>
</head>
<body>
<ul id="list">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>
</body>
</html>
It’s pretty straightforward to make a list draggable with Scriptaculous. Now the users can drag and drop the items in the list to sort them the way they want.
Cheers :-)
I like your jquery posts. very helpful thanks.
was searching for dropdown sorting and found-
http://stackoverflow.com/questions/667010/sorting-dropdown-list-using-javascript/7586756#7586756
using peters code but it is sorting drop down options in alphebetic order and what change should i do in above code to make the sorting as ascending value of options.
thanks
Sana
Comment by Sana — September 28, 2011 @ 11:57 am