This option is used to define the effect to use when the draggable starts being dragged.
By default, it changes the element's opacity to 0.2 in 0.2 seconds.
new Draggable('element', {starteffect: 'effectFunction'});
Here effectFunction is the function, which defines the effect to be applied.
<html> <head> <title>Draggables Elements</title> <script type = "text/javascript" src = "/javascript/prototype.js"></script> <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script> <script type = "text/javascript"> window.onload = function() { new Draggable('myimage', {starteffect: effectFunction('myimage')}); } function effectFunction(element) { new Effect.Opacity(element, {from:0, to:1.0, duration:10}); } </script> </head> <body> <p>This image will display very slow in the start.</p> <img id = "myimage" src = "/images/scriptaculous.gif"/> </body> </html>
This will produce following result −