Drag & Drop with ghosting Option

Description

This option is used to determine whether the draggable should be cloned for dragging, leaving the original in place until the clone is dropped. Defaults to false.

When ghosting is set to true, a drag operation appears to leave the original target element in place, while a semi-transparent version of the element is dragged about.

Syntax

Here is the simple syntax to use the ghosting option.

new Draggable('element', {ghosting: true or false });

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', {ghosting:true});
         }
      </script>
   </head>

   <body>
      <p>Try to drag following image and see how it leaves it
         original image at its place. Later change ghosting to false
         and repeat the exercise</p>
      <img id = "myimage" src = "/images/scriptaculous.gif"/>
   </body>
</html>

This will produce following result −

scriptaculous_drag_drop.htm