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 would be invoked whenever the dragging of the element starts. The element which is 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:
{ onStart: 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 dragging of an element starts.
The below examples illustrates the use of this option.
Example 1:
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 starts to // be dragged new Draggable('elem1', { onStart: (elem) => { console.log("The element has" + " started to being dragged"); console.log(elem); } }); }; </ script > </ head > < body > < div > < h1 style = "color: green" > w3wiki </ h1 > </ div > < strong > script.aculo.us Drag & Drop onStart Option </ strong > < p > The onStart callback would be invoked whenever the element is started to be dragged. </ p > < p > Drag the image below and check the console. </ p > < img id = "elem1" src = "elem1.png" > </ body > </ html > |
Output:
Example 2:
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 () { new Draggable('elem1', { // Define a function to be used // when the element starts // to be dragged onStart: () => { new Effect.Pulsate('elem1', ); } }); }; </ script > </ head > < body > < div > < h1 style = "color: green" > w3wiki </ h1 > </ div > < strong > script.aculo.us Drag & Drop onStart Option </ strong > < p > The onStart callback would be invoked whenever the element is started to be dragged. </ p > < p > Drag the image below to notice the visual effect. </ p > < img id = "elem1" src = "elem1.png" > </ body > </ html > |
Output:
Reference: http://script.aculo.us/
Contact Us