Drag & Drop with starteffect Option

Description

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

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

Syntax

new Draggable('element', {starteffect: '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: effectFunction('myimage')});
         }

         function effectFunction(element) {
            new Effect.Opacity(element, {from:0, to:1.0, duration:10});
         }
      </script>
   </head>
   
   <body>
      <p>This image will display very slow in the start.</p>
      <img id = "myimage" src = "/images/scriptaculous.gif"/>
   </body>
</html>

This will produce following result −

scriptaculous_drag_drop.htm
Advertisements