script.aculo.us Drag & Drop onDrag 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 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/
Please Login to comment...