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 tutorialStep 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>
<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"></p>
<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"></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>
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
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 tutorialRelated Content
Effect appear (fade-in) using Scriptaculous
Toggle effect using Scriptaculous
Horizontal animated menu using Mootools
Mootools animated sidebar menu
I am Antonio Lupetti, Engineer, Pro Blogger, Mac user, Web addicted.
Rome, IT.
Sponsored Links
Share this post
Old Comments
Hi there!
What a nice blog!
Keep up the good work!
RSSed! =)
Antonio, you rock! I have been reading your posts and they're nothing but fresh and original work! Keep up the great standard!
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..
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.
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
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.
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;
}
really good script..
but what if i wanna drag an image??
can this script do that??
please email me..ok
mikazuki_rain@yahoo.com
Nice this script,
is there an iphon version?