Learn script.aculo.us
script.aculo.us Resources
Selected Reading
© 2011 TutorialsPoint.COM
|
Drag 'n' Drop with starteffect Option
Description:
This option is used to define the effect to use when the draggable starts being dragged.
By default, it changes element's opacity to 0.2 in 0.2 seconds.
Syntax:
new Draggable('element', {starteffect: 'effectFunction'});
|
Here effectFunction is function which defines effect to be applied.
Example:
<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>
|
To understand it in better way you can Try it yourself.
|
|
|