Learn script.aculo.us
script.aculo.us Resources
Selected Reading
© 2011 TutorialsPoint.COM
|
Drag 'n' Drop with endeffect Option
Description:
This option is used to define define the effect to use when the draggable stops being dragged.
By default, it changes element's opacity to 1.0 in 0.2 seconds.
Syntax:
new Draggable('element', {endeffect: '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:null,
endeffect: function(element){
new Effect.Opacity(element,
{from:0, to:1.0, duration:10} )
}
});
}
</script>
</head>
<body>
<p>Drag the image and leave it to see the result:;</p>
<img id="myimage" src="/images/scriptaculous.gif"/>
</body>
|
To understand it in better way you can Try it yourself.
|
|
|