script.aculo.us Sorting onChange Option
Last Updated :
28 Dec, 2020
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:
Share your thoughts in the comments
Please Login to comment...