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
No comments:
Post a Comment