script.aculo.us Sorting Elements Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report 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: OptionsDescriptiontagIt specifies the type of the elements within the container that are to be made sortable. Defaults to 'li'.onlyThe 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.overlapoverlap has false, horizontal and vertical as its values. It controls the point at which a reordering is triggered. Default value is verticalconstraintIt has false, horizontal and vertical as values. Constrains the movement of dragged sortable elements. Defaults to vertical.containmentEnables dragging and dropping between Sortables. Takes an array of elements or element-id. handlehandle specifies an element to be used to initiate drag operations. By default, each element is its own handle.hoverclasshoverclass gives a CSS class name which is triggered on non-dragged sortable elements when a dragged element passes over them.ghostingghosting enables the user to make a semi-transparent copy of the element which can be moved along with the mouse pointer. Defaults to false.dropOnEmptydropOnEmpty allows sortable elements to be dropped onto an empty list. Defaults to false.scrollIf the sortable container has a scrollbar, this option enables auto-scrolling of the list . scrollSensitivityIf scrolling is enabled, it adjusts the point at which scrolling is triggered. Defaults to 20.scrollSpeedIf scrolling is enabled, it adjusts the scroll speed. Defaults to 15.treeTree enables sorting with sub-elements within the sortable element. Defaults to false.treeTagWhen 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 OptionsDescriptiononChangeIt is triggered whenever the sort order changes while dragging. It gets the affected element as its parameter.onUpdateIt is triggered upon the termination of a drag operation which results in a change in element order. Comment More infoAdvertise with us Next Article script.aculo.us Sorting tag Option S swapnil074 Follow Improve Article Tags : Technical Scripter JavaScript Web Technologies Technical Scripter 2020 script.aculo.us +1 More Similar Reads script.aculo.us Sorting tag Option The tag option in the Sortable module is used to specify the type of elements that have to be made sortable in the container. Its default value is 'li', which is the list element. Syntax: Sortable.create( container_id, {tag: container_type} ); Example 1: HTML <!DOCTYPE html> <html> <h 1 min read script.aculo.us Sorting overlap Option The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The sortable module can be used to make any list sortable, allowing the user to drag any item according to the order required. The overlap option is used to specify whether the item in the 3 min read script.aculo.us Sorting dropOnEmpty Option The dropOnEmpy option in the Sortable module allows sortable elements to be dropped onto another list. Its default value is false. Syntax: Sortable.create(List1_id, {containment: [List1_id, List2_id], dropOnEmpty: true}); Sortable.create(List2_id, {containment: [List1_id, List2_id], dropOnEmpty: tru 1 min read script.aculo.us Sorting ghosting Option The ghosting option in the Sortable module is used to enable the user to make a semi-transparent copy of the element that is moved along with the mouse pointer. Its default value is 'false’, which means no copy is made. Syntax: Sortable.create('list', {ghosting: boolean}) The examples below demonstr 1 min read script.aculo.us Sorting constraint Option The constraint option in the Sortable module is used to restrict the direction of movement of the elements while they are being dragged. It can either be set to 'horizontal' or 'vertical', thereby allowing movement in only that direction. Its default value is 'vertical’. Syntax: Sortable.create('lis 1 min read Sort a String in JavaScript Here are the most used methods to sort characters in a string using JavaScript.Using split(), sort(), and join()The most simple way to sort a string is to first convert it to an array of characters, sort the array, and then join it back into a string.JavaScriptlet s1 = "javascript"; let s2 = s1.spli 2 min read Like