This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Friday, February 8, 2008

Drag and drop to order list elements with Scriptaculous

Drag and drop feature is a popular effect in modern website interfaces and a simple way to implement it is using Scriptaculous.

This tutorial explains how to use Scriptaculous to implement an HTML list with drag and drop feature to reorder list elements.


Download this tutorial

Step 1: Add scriptaculous framework
To enable drag and drop effect you have to download Scriptaculous framework here and add a link to prototype.js and scriptaculous.js in the <head> tag of your page:

<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>


Step 2: HTML Code
Add a <ul>list with ID "myList" and some <li> elements with a progressive ID like in the following example:

<ul id="myList" class="listClass">
<li id="item_1">Adobe</li>
<li id="item_2">Apple</li>
<li id="item_3">Microsoft</li>
<li id="item_4">Macromedia</li>
<li id="item_5">Symantec</li>
<li id="item_6">Mozilla Foundation</li>
<li id="item_7">Skype</li>
</ul>
<!-- Display a string with the new order after drag and drop here -->
<p id=
"listNewOrder">&lt/p>

Add this javascript code below the previous code:

<script type="text/javascript" language="javascript" charset="utf-8">
Sortable.create('myList',{ghosting:false, constraint:true, hoverclass:'over',
onChange:function(element){
// Total elements in the list (in this case 7 <li> element)
var totElement = 7;
var newOrder = Sortable.serialize(element.parentNode);
for(i=1; i<=totElement; i++){
newOrder = newOrder.replace("myList[]=","");
newOrder = newOrder.replace("&",",");
}
// display the string with the new order in the <Pgt; with id listNewOrder
$('listNewOrder').innerHTML = 'New Order: ' + newOrder;
}
});
</script>

newOrder is a string variable which returns the new order of all elements of "myList" for example:

1,2,4,3,5,6,7

... where list element 4 has moved before list element 3. The new order is:

li element 1 --> position 1
li element 2 --> position 2
li element 3 --> position 4 (changed from position 3 to position 4)
li element 4 --> position 3 (changed from position 4 to position 3)
li element 5 --> position 5
li element 6 --> position 6
li element 7 --> position 7

If you use PHP or another server side language like ASP or Coldfusion you can save the new list order assigning the value of newOrder to an hidden <input> HTML element in this way:

$('newOrderInput').value = newOrder;


... and adding an hidden input field with id newOrderInput in your HTML code after <ul> list with ID "myList":

<input type="hidden" id="newOrderInput" value="">

In this way every time you drag and drop a list item the value will be updated with the text string with the new order. Then you can use this string (for example "1,2,4,3,5,6,7") and PHP to save the new order into a database table.

Download this tutorial


Related Content
Effect appear (fade-in) using Scriptaculous
Toggle effect using Scriptaculous
Horizontal animated menu using Mootools
Mootools animated sidebar menu

blog comments powered by Disqus
Mini0n said...

Hi there!
What a nice blog!
Keep up the good work!
RSSed! =)

AK said...

Antonio, you rock! I have been reading your posts and they're nothing but fresh and original work! Keep up the great standard!

safras said...

This is a really good script,
I was searching for all the sites and finally I stoped here.

I have did as I want, but have small javascript broblem, Hope I will find it soon.

Thanks for Code..

Ramkumar said...

Hi,

In this example drag with in th e single list, i need to drag from second list and drop the data in to the first list with sorting.

Ramkumar said...

Hi,

In this example drag with in th e single list, i need to drag from second list and drop the data in to the first list with sorting.

Regards,
Ramkumar.P

Anonymous said...

Hmmm ...

Good one. Works well, only thing is that I'm not getting the new sort lists ... all what I get inside the p id="listNewOrder" are ,,, only.

AJenbo said...

nice tutorial.
My only complaint is that it wasn't totaly clear that the javascript had to be below the html code and not just below the other javascript.

Also it's inconvenient that you have to enter the number of elements, so i suggest using a global js replace function instead of looping single replace's, is probably also faster.

onChange:function(element){
var newOrder = Sortable.serialize(element.parentNode);
newOrder = newOrder.replace(/myList\[\]=/g,"");
newOrder = newOrder.replace(/&/g,",");
$('myList_serialize').innerHTML = newOrder;
}

Anonymous said...

really good script..
but what if i wanna drag an image??
can this script do that??

please email me..ok
mikazuki_rain@yahoo.com

web.solutions said...

Nice this script,

is there an iphon version?

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News