Order List Drag and Drop

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=myListclass=“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>

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

3 comments

  1. Pingback: html javascript

  2. Pingback: Bookmarks about Scriptaculous

  3. Ed Darga   •  

    Hello administrator, I’ve a little bit request. I had been simply googleing for some information on the topic you published and found this post. Some very nice material you posted proper here. Can I if potential talk about this post on my new website I am creating? This may be terrific. I will examine again but once more afterwards to learn how you replied. Many thanks

Comments are closed.