script.aculo.us Drag & Drop onStart Option
Last Updated :
25 Dec, 2020
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" >
GeeksforGeeks
</ 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" >
GeeksforGeeks
</ 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/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...