script.aculo.us Drag & Drop onDrag Option Last Updated : 25 Dec, 2020 Summarize Comments Improve Suggest changes Share 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 Drag & Drop module can be used to make any element drag-gable and also enables them to be dropped in a drop zone. The onDrag option is used to specify a callback function that would be invoked whenever the element is currently being dragged. The element which is being dragged would be passed as the parameter to the function. Include Scripts: Step 1: Before getting started, You will require to download the script files which are included in the <head> tag of our HTML page. You can download it from http://script.aculo.us/downloads Step 2: Unzip the files and put the required files (mainly prototype.js and scriptaculous.js) in the current root directory of your folder. Step 3: Place any image of your choice in the current root directory of your folder, like in the following example elem1.png is used. Syntax: { onEnd: 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="prototype.js"> </script> <script type="text/javascript" src="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', { onDrag: (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 onDrag Option </strong> <p> The onDrag 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="elem1.png"> </body> </html> Output: Reference: http://script.aculo.us/ Comment More infoAdvertise with us Next Article script.aculo.us Drag & Drop endeffect Option S sayantanm19 Follow Improve Article Tags : JavaScript Web Technologies script.aculo.us Similar Reads script.aculo.us Drag & Drop onDrop Option This script.aculo.us Drag & Drop onDrop Option is used to call the callback function which is called when a suitable drag-gable element is dropped onto the drop target and the target accepts it. Syntax: Droppables.add('element', {onDrop: 'callbackFunction'} ); Values: function: This option takes 2 min read script.aculo.us Drag & Drop onEnd 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 onEnd option is used to specify a callback function that would 3 min read script.aculo.us Drag & Drop onStart 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 onStart option is used to specify a callback function that woul 3 min read script.aculo.us Drag & Drop endeffect Option This script.aculo.us Drag & Drop endeffect Option is used to define the function which is called when a suitable drag-gable element stops being dragged. The function can be used to define any effect. Syntax: { endeffect: effectFunction } Values: effectFunction: This value defines the function th 2 min read script.aculo.us Drag & Drop greedy Option This script.aculo.us Drag & Drop greedy Option is used to stops processing hovering other droppable, under the drag-gable won't be searched. The default value of this option is true, that means the drop area will accept the draggable element false won't. Syntax: Droppables.add('element', {greedy 2 min read script.aculo.us Drag & Drop onHover 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 onHover option is used to specify a callback function that is a 2 min read Like