Drag & Drop with endeffect Option


Advertisements


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

<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

Advertisements