Skip to content
Related Articles

Related Articles

script.aculo.us Sorting Elements
  • Last Updated : 30 Dec, 2020

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:

OptionsDescription
tagIt 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 vertical
constraintIt 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 trigerred 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 pecifies the container element type of the sub-element whose children are sortable

Example:




<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

OptionsDescription
onChangeIt is trigerred whenever the sort order changes while dragging.  It gets the affected element as its parameter.
onUpdateIt is trigerred upon the termination of a drag operation which results in a change in element order.

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :