script.aculo.us Sorting Elements
Last Updated :
19 Apr, 2022
Sortable provides the ability to user to create many draggable elements within the container. When you create a Sortable, it automatically creates the corresponding Draggable and Droppable for the container.
Syntax:
Sortable.create('container_id', {options});
Sortable Options:
| Options |
Description |
| tag |
It specifies the type of the elements within the container that are to be made sortable. Defaults to ‘li’. |
| only |
The only provides a CSS class name, or array of class names, that a draggable item must posses in order to be accepted by the drop. |
| overlap |
overlap has false, horizontal and vertical as its values. It controls the point at which a reordering is triggered. Default value is vertical |
| constraint |
It has false, horizontal and vertical as values. Constrains the movement of dragged sortable elements. Defaults to vertical. |
| containment |
Enables dragging and dropping between Sortables. Takes an array of elements or element-id. |
| handle |
handle specifies an element to be used to initiate drag operations. By default, each element is its own handle. |
| hoverclass |
hoverclass gives a CSS class name which is triggered on non-dragged sortable elements when a dragged element passes over them. |
| ghosting |
ghosting enables the user to make a semi-transparent copy of the element which can be moved along with the mouse pointer. Defaults to false. |
| dropOnEmpty |
dropOnEmpty allows sortable elements to be dropped onto an empty list. Defaults to false. |
| scroll |
If the sortable container has a scrollbar, this option enables auto-scrolling of the list . |
| scrollSensitivity |
If scrolling is enabled, it adjusts the point at which scrolling is triggered. Defaults to 20. |
| scrollSpeed |
If scrolling is enabled, it adjusts the scroll speed. Defaults to 15. |
| tree |
Tree enables sorting with sub-elements within the sortable element. Defaults to false. |
| treeTag |
When the tree option is enabled, it specifies the container element type of the sub-element whose children are sortable |
Example:
javascript
<html>
<head>
<title></title>
<script type = "text/javascript"
src = "./javascript/prototype.js"></script>
<script type = "text/javascript"
src = "./javascript/scriptaculous.js"></script>
<script>
window.onload = function() {
Sortable.create('list', {tag:'li'});
}
</script>
<style>
li { cursor: move; }
</style>
</head>
<body>
<ul id = "list">
<li>tag</li>
<li>overlap</li>
<li>constraint</li>
<li>containment</li>
<li>handle</li>
</ul>
</body>
</html>
|
Output:
CallBack Options
| Options |
Description |
| onChange |
It is triggered whenever the sort order changes while dragging. It gets the affected element as its parameter. |
| onUpdate |
It is triggered upon the termination of a drag operation which results in a change in element order. |
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...