Skip to content
Related Articles

Related Articles

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :