Open In App

script.aculo.us Sorting onChange Option

Improve
Improve
Like Article
Like
Save
Share
Report

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

Syntax:

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

Example:

HTML




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


Output:



Last Updated : 28 Dec, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads