Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article 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.


Sortable.create('container_id', {options});

Sortable Options:

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



     <script type = "text/javascript"
             src = "./javascript/prototype.js"></script>
     <script type = "text/javascript"
             src = "./javascript/scriptaculous.js"></script>
        window.onload = function() {
           Sortable.create('list', {tag:'li'});
        li { cursor: move; }
     <ul id = "list">


CallBack Options

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!