script.aculo.us Drag & Drop change Option
The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The Drag & Drop module can be used to make any element drag-gable and also enables them to be dropped in a drop zone.
The change option is called just like the onDrag option, i.e. it is used to specify a callback function that would be invoked whenever the element is currently being dragged. But the onDrag option is the more preferred one as compared to the change option.
Syntax:
new Draggable('element', {change: 'function'});Parameters: This option has a single value as mentioned above and described below:
- function: This is a callback function that would be invoked whenever the element is being dragged.
The below example illustrates the use of this option.
Example:
HTML
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="javascript/prototype.js"> </script> <script type="text/javascript" src="javascript/scriptaculous.js"> </script> <script type="text/javascript"> window.onload = function () { // Define a function to be used // when the element is being dragged new Draggable('elem1', { change: (elem) => { console.log("The element is " + "currently being dragged"); // The element that is being dragged // can be accessed using the parameter // in the callback function }, onEnd: () => { console.log("The dragging of " + "the element has stopped"); } }); }; </script> </head> <body> <div> <h1 style="color: green"> GeeksforGeeks </h1> </div> <strong> script.aculo.us Drag & Drop change Option </strong> <p> The change callback would be invoked whenever the element is being currently dragged. </p> <p> Drag the image below and check the console. </p> <img id="elem1" src="gfg.png"> </body> </html> |
Output:
