Skip to content
Related Articles

Related Articles Sorting onChange Option
  • Last Updated : 28 Dec, 2020

The 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 onChange option is used to specify a callback function that would be invoked whenever the sort order changes during the dragging of the items in a list. The element whose order is changed would be passed as the parameter to the function.


{ onChange: function }

Parameters: This option has a single value as mentioned above and described below:

  • function: This is a callback function which would be invoked whenever the ordering of the elements change.

The below example illustrates the use of this option.



<!DOCTYPE html>
  <script type="text/javascript" 
  <script type="text/javascript" 
    li {
      cursor: pointer;
      height: 30px;
      width: 100px;
      border: 1px solid;
      padding: 10px;
    <h1 style="color: green">
  <strong> Sorting onChange Option
    Move the items in the list to 
    trigger the onChange callback.
  <ul id="list1">
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
    <li>Element 4</li>
  <script type="text/javascript">
    window.onload = function () {
      Sortable.create("list1", {
        // Define the function to be used
        // when the list order changes
        onChange: (elem) => {
            "The element that was changed was:",


My Personal Notes arrow_drop_up
Recommended Articles
Page :