script.aculo.us Sorting onChange Option Last Updated : 28 Dec, 2020 Comments Improve Suggest changes Like Article Like 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: Comment More infoAdvertise with us Next Article script.aculo.us Sorting constraint Option S sayantanm19 Follow Improve Article Tags : JavaScript Web Technologies script.aculo.us Similar Reads script.aculo.us Sorting constraint Option The constraint option in the Sortable module is used to restrict the direction of movement of the elements while they are being dragged. It can either be set to 'horizontal' or 'vertical', thereby allowing movement in only that direction. Its default value is 'vertical’. Syntax: Sortable.create('lis 1 min read script.aculo.us Sorting ghosting Option The ghosting option in the Sortable module is used to enable the user to make a semi-transparent copy of the element that is moved along with the mouse pointer. Its default value is 'false’, which means no copy is made. Syntax: Sortable.create('list', {ghosting: boolean}) The examples below demonstr 1 min read script.aculo.us Sliders onChange Option The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The Slider controls are thin tracks that allow the user to input values. It is done by defining a range of values that can be selected by the user by dragging the handle to the appropriate 2 min read script.aculo.us Sorting dropOnEmpty Option The dropOnEmpy option in the Sortable module allows sortable elements to be dropped onto another list. Its default value is false. Syntax: Sortable.create(List1_id, {containment: [List1_id, List2_id], dropOnEmpty: true}); Sortable.create(List2_id, {containment: [List1_id, List2_id], dropOnEmpty: tru 1 min read script.aculo.us Sorting tag Option The tag option in the Sortable module is used to specify the type of elements that have to be made sortable in the container. Its default value is 'li', which is the list element. Syntax: Sortable.create( container_id, {tag: container_type} ); Example 1: HTML <!DOCTYPE html> <html> <h 1 min read script.aculo.us Sorting overlap Option 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 overlap option is used to specify whether the item in the 3 min read Like