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"> neveropen </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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
