script.aculo.us Drag & Drop starteffect Option
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" > w3wiki </ h1 > < p >A Computer Science Portal for Beginner </ p > </ div > < strong > script.aculo.us Drag & Drop starteffect Option </ strong > < div id = "draggables" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png" > </ div > </ body > </ html > |
Output: