script.aculo.us Drag & Drop ghosting Option

Last Updated : 28 Dec, 2020

The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The Drag & Drop module can be used to make any element drag-gable and also enables them to be dropped in a drop zone.

The ghosting option is used to specify if a clone of the element is made and that clone is moved instead of the original element until it is dropped. Its default value is ‘false’, which means no clone will be made default.

Syntax:

{ ghosting: value }

Parameters: This option has a single value as mentioned above and described below:

value: This is a boolean value that specifies if a clone would be created when dragging. The default value is ‘false’.

The below example illustrates the use of this option.

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <script type="text/javascript"
          src="prototype.js"> 
  </script> 
  
  <script type="text/javascript" 
          src="scriptaculous.js"> 
  </script> 
  
  <script type="text/javascript"> 
    window.onload = function () { 
  
      // Draggable element with 
      // ghosting set to true 
      new Draggable('elem1',  
          { ghosting: true }); 
  
      // Draggable element with 
      // ghosting set to false 
      new Draggable('elem2',  
          { ghosting: false }); 
    }; 
  </script> 
</head> 
  
<body> 
  <div> 
    <h1 style="color: green"> 
      GeeksforGeeks 
    </h1> 
  </div> 
  
  <strong> 
    script.aculo.us Drag & 
    Drop ghosting Option 
  </strong> 
  
    
  <p> 
    Drag the elements to see the  
    effect of the ghosting option. 
    Element 1 has the ghosting set  
    to 'true' and Element 2 has the  
    ghosting set to 'false'. 
  </p> 
  
  <img id="elem1" src="elem1.png"> 
  <img id="elem2" src="elem2.png"> 
</body> 
  
</html>