Drag & Drop with change Option


Advertisements


Description

This callback function is called when a drag is in progress. This is the preferred callback for drag event.

Syntax

new Draggable('element', {change: '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', 
               { 
               change : function(){
                  new Effect.Opacity('myimage', {from:0, to:1.0, duration:1});
                  }

               }
            );
         }
      </script>

   </head>
   <body>
   
      <p>While you drag this image it become disappear.</p>
      <img id="myimage" src="/images/scriptaculous.gif"/>

   </body>
</html>

This will produce following result −


scriptaculous_drag_drop.htm