script.aculo.us Drag & Drop starteffect Option
Last Updated :
25 Nov, 2020
This script.aculo.us Drag & Drop starteffect Option is used to define the function which is called when a suitable drag-gable element starts being dragged. The function can be used to define any effect.
Syntax:
{ starteffect: effectFunction }
Values:
- effectFunction: This value defines the function that contains the effect to be shown when the drag-gable is being starts being dragged.
The below example illustrates Drag & Drop starteffect 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 () {
$A($('draggables')
.getElementsByTagName('img'))
.each(function (item) {
new Draggable(item, {
revert: true,
// Define the effect to be used
// when the dragging starts
starteffect: function (element) {
new Effect.Opacity(element,
{
from: 0,
to: 1.0,
duration: 5
})
}
});
});
}
</ script >
</ head >
< body style = "text-align: center;" >
< div >
< h1 style = "color: green" >
GeeksforGeeks
</ h1 >
< p >A Computer Science Portal
for Geeks
</ p >
</ div >
< strong >
script.aculo.us Drag & Drop
starteffect Option
</ strong >
< div id = "draggables" >
< img src =
</ div >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...