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. |
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
