Drag & Drop with endeffect Option

Description

This option is used to define the effect to use when the draggable stops being dragged.

By default, it changes the element's opacity to 1.0 in 0.2 seconds.

Syntax

new Draggable('element', {endeffect: 'effectFunction'});

Here effectFunction is the function, which defines the effect to be applied.

Example

Live Demo

<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>
</html>

This will produce following result −

scriptaculous_drag_drop.htm