Learn script.aculo.us
script.aculo.us Resources
Selected Reading
© 2011 TutorialsPoint.COM
|
Drag 'n' Drop with reverteffect Option
Description:
This option is used to define the effect to use when the draggable reverts back to its starting position.
Defaults to a smooth slide to element's original position. The reverteffect option specifies the function to be called just prior to the endeffect function when the revert option is set to true.
Syntax:
new Draggable('element', {reverteffect: '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() {
var img = 'myimage';
new Draggable('myimage' , {
revert: true,
reverteffect: function(){
new Effect.MoveBy('myimage', 100,100);
}
});
}
</script>
</head>
<body>
<p>Drag and leave this image to see the result.</p>
<img id="myimage" src="/images/scriptaculous.gif"/>
</body>
|
To understand it in better way you can Try it yourself.
|
|
|