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...