Drag & Drop with starteffect Option


Advertisements


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

<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