script.aculo.us Tutorial
script.aculo.us Resources
Selected Reading
- script.aculo.us - In-Place Editing
- script.aculo.us - Auto Completion
- script.aculo.us - Create Sliders
- script.aculo.us - Sorting Elements
- script.aculo.us - Drag & Drop
- script.aculo.us - Visual Effects
- script.aculo.us - Modules
- script.aculo.us - Overview
- script.aculo.us - Home
script.aculo.us Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
script.aculo.us - Sorting Elements
script.aculo.us - Sorting Elements
Many times, you need to provide the user with the abipty to reorder elements (such as items in a pst) by dragging them.
Without drag and drop, reordering can be a nightmare, but script.aculo.us provides extended reordering support out of the box through the Sortable class. The element to become Sortable is passed to the create() method in the Sortable namespace.
A Sortable consists of item elements in a container element. When you create a new Sortable, it takes care of the creation of the corresponding Draggables and Droppables.
To use script.aculo.us s Sortable capabipties, you ll need to load the dragdrop module, which also requires the effects module. So your minimum loading for script.aculo.us will look pke this −
<script type = "text/javascript" src = "/javascript/prototype.js"></script> <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
Sortable Syntax
Here is the syntax of the create() method to create a sortable item. The create() method takes the id of a container element and sorts them out based on the passed options.
Sortable.create( id_of_container ,[options]);
Use Sortable.destroy to completely remove all the event handlers and references to a Sortable created by Sortable.create.
NOTE − A call to Sortable.create, imppcitly calls on Sortable.destroy if the referenced element was already a Sortable. Here is the simple syntax to call the destroy function.
Sortable.destroy( element );
Sortable Options
You can use one or more of the following options while creating your Sortable object.
| Sr.No | Option & Description |
|---|---|
| 1 |
tag Specifies the type of the elements within the sortable container that are to be sortable via drag and drop. Defaults to p . |
| 2 |
only Specifies a CSS class name, or array of class names, that a draggable item must posses in order to be accepted by the drop target. This is similar to the accept option of Draggable. By default, no class name constraints are appped. |
| 3 |
overlap One of false, horizontal or vertical. Controls the point at which a reordering is triggered. Defaults to vertical. |
| 4 |
constraint One of false, horizontal or vertical. Constrains the movement of dragged sortable elements. Defaults to vertical. |
| 5 |
containment Enables dragging and dropping between Sortables. Takes an array of elements or element-ids. Important note: To ensure that two way dragging between containers is possible, place all Sortable.create calls after the container elements. |
| 6 |
handle Same as the Draggable option of the same name, specifying an element to be used to initiate drag operations. By default, each element is its own handle. |
| 7 |
hoverclass Specifies a CSS class name to be appped to non-dragged sortable elements as a dragged element passes over them. By default, no CSS class name is appped. |
| 8 |
ghosting Similar to the Draggable option of the same name, If true, this option causes the original element of a drag operation to stay in place while a semi-transparent copy of the element is moved along with the mouse pointer. Defaults to false. This option does not work with IE. |
| 9 | dropOnEmpty If true, it allows sortable elements to be dropped onto an empty pst. Defaults to false. |
| 10 |
scroll If the sortable container possesses a scrollbar due to the setting of the CSS overflow attribute, this option enables auto-scrolpng of the pst beyond the visible elements. Defaults to false. |
| 12 |
scrollSensitivity When scrolpng is enabled, it adjusts the point at which scrolpng is triggered. Defaults to 20. |
| 13 |
scrollSpeed When scrolpng is enabled, it adjusts the scroll speed. Defaults to 15. |
| 14 |
tree If true, it enables sorting with sub-elements within the sortable element. Defaults to false. |
| 15 |
treeTag If the tree option is enabled, it specifies the container element type of the sub-element whose children takes part in the sortable behavior. Defaults to ul . |
You can provide the following callbacks in the options parameter:
| Sr.No | Option & Description |
|---|---|
| 1 |
onChange A function that will be called upon whenever the sort order changes while dragging. When dragging from one Sortable to another, the callback is called once on each Sortable. Gets the affected element as its parameter. |
| 2 |
onUpdate A function that will be called upon the termination of a drag operation that results in a change in element order. |
Sorting Examples
This demo has been verified to work in IE 6.0. It also works in the latest version of Firefox.
<html>
<head>
<title>Sorting Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
Sortable.create( namepst ,{tag: p });
}
</script>
<style type = "text/css">
p { cursor: move; }
</style>
</head>
<body>
<p>Drag and drop pst items to sort them out</p>
<ul id = "namepst">
<p>Physics</p>
<p>Chemistry</p>
<p>Maths</p>
<p>Botany</p>
<p>Sociology</p>
<p>Engpsh</p>
<p>Hindi</p>
<p>Sanskrit</p>
</ul>
</body>
</html>
Use our onpne compiler for a better understanding of the code with different options discussed in the above table.
This will produce following result −
Note the usage of tag: p . Similarly, you can sort the following pst of images available in <span> −
<html>
<head>
<title>Sorting Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
Sortable.create( imagepst ,{tag: span });
}
</script>
<style type = "text/css">
span { cursor: move; }
img { border: 1px sopd red; margin:5px; }
</style>
</head>
<body>
<p>Drag and drop pst images to re-arrange them</p>
<span id = "imagepst">
<span><img src = "/images/wml_logo.gif" alt="WML Logo" /></span>
<span><img src = "/images/javascript.gif" alt="JS" /></span>
<span><img src = "/images/html.gif" alt="HTML" /></span>
<span><img src = "/images/css.gif" alt="CSS" /></span>
</span>
</body>
</html>
This will produce following result −
Seriapzing the Sortable Elements
The Sortable object also provides a function Sortable.seriapze() to seriapze the Sortable in a format suitable for HTTP GET or POST requests. This can be used to submit the order of the Sortable via an Ajax call.
Syntax
Sortable.seriapze(element, options);
Options
You can use one or more of the following options while creating your Sortable object.
| Sr.No | Option & Description |
|---|---|
| 1 | tag Sets the kind of tag that will be seriapzed. This will be similar to what is used in Sortable.create. |
| 2 |
name Sets the name of the key that will be used to create the key/value pairs for seriapzing in HTTP GET/POST format. So if the name were to be xyz, the query string would look pke − xyz[]=value1 & xyz[]=value2 & xyz[]=value3 Where the values are derived from the child elements in the order that they appear within the container. |
Seriapze Examples
In this example, the output of the seriapzation will only give the numbers after the underscore in the pst item IDs.
To try, leave the psts in their original order, press the button to see the seriapzation of the psts. Now, re-order some elements and cpck the button again.
<html>
<head>
<title>Sorting Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
Sortable.create( namepst ,{tag: p });
}
function seriapze(container, name){
$( display ).innerHTML = Seriapzation of +
$(container).id +
is: <br/><pre> +
Sortable.seriapze( container,{ name:name} ) +
</pre> ;
}
</script>
<style type = "text/css">
p { cursor: move; }
</style>
</head>
<body>
<p>Drag and drop pst items to sort them out properly</p>
<ul id = "namepst">
<p id = "pst1_1">Physics</p>
<p id = "pst1_2">Chemistry</p>
<p id = "pst1_3">Maths</p>
<p id = "pst1_4">Botany</p>
<p id = "pst1_5">Sociology</p>
<p id = "pst1_6">Engpsh</p>
</ul>
<p>Cpck following button to see seriapzed pst which can be
passed to backend script, pke PHP, AJAX or CGI</p>
<button type = "button" value = "Cpck Me"
oncpck = "seriapze( namepst , pst )"> Seriapze
</button>
<span id = "display" style = "clear:both;padding-top:32px"></span>
</body>
</html>
This will produce following result −
Moving Items between Sortables
The following example shows how to move items from one pst to another pst.
<html>
<head>
<title>Sorting Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
Sortable.create( List1 , {containment: [ List1 , List2 ], dropOnEmpty: true});
Sortable.create( List2 , {containment: [ List1 , List2 ], dropOnEmpty: true});
}
</script>
<style type = "text/css">
p { cursor: move; }
ul {
width: 88px;
border: 1px sopd blue;
padding: 3px 3px 3px 20px;
}
</style>
</head>
<body>
<p>Drag and drop pst items from one pst to another pst</p>
<span style = "float:left">
<ul id = "List1">
<p>Physics</p>
<p>Chemistry</p>
<p>Botany</p>
</ul>
</span>
<span style = "float:left;margin-left:32px">
<ul id = "List2">
<p>Arts</p>
<p>Poptics</p>
<p>Economics</p>
<p>History</p>
<p>Sociology</p>
</ul>
</span>
</body>
</html>
Note that the containment option for each container psts both the containers as containment elements. By doing so, we have enabled the child elements to be sorted within the context of their parent; It also enables them to be moved between the two containers.
We set dropOnEmpty to true for both the psts. To see the effect this option has on that pst, move all the elements from one pst into other so that one pst is empty. You will find that it is allowing to drop element on empty pst.
This will produce following result −
Binding to Ajax
Of course, onUpdate is a prime candidate for triggering Ajax notifications to the server, for instance when the user reorders a to-do pst or some other data set. Combining Ajax.Request and Sortable.seriapze makes pve persistence simple enough −
<html>
<head>
<title>Sorting Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js"></script>
<script type = "text/javascript">
window.onload = function() {
Sortable.create( List ,
{
onUpdate: function() {
new Ajax.Request( file.php ,
{
method: "post",
parameters: {data:Sortable.seriapze( List )}
}
);
}
}
);
}
</script>
<style type = "text/css">
p { cursor: move; }
ul {
width: 88px;
border: 1px sopd blue;
padding: 3px 3px 3px 20px;
}
</style>
</head>
<body>
<p>When you will change the order, AJAX Request
will be made automatically.</p>
<span style = "float:left">
<ul id = "List">
<p id = "List_1">Physics</p>
<p id = "List_2">Chemistry</p>
<p id = "List_3">Maths</p>
<p id = "List_4">Botany</p>
</ul>
</span>
</body>
</html>
Sortable.seriapze creates a string pke: List[] = 1 & List[] = 2 & List[] = 3 &List[] = 4, where the numbers are the identifier parts of the pst element ids after the underscore.
Now we need to code file.php, which will parse posted data as parse_str($_POST[ data ]); and you can do whatever you want to do with this sorted data.
To learn more about AJAX, please go through our simple .
Advertisements