Skip to content
Related Articles

Related Articles Drag & Drop ghosting Option

View Discussion
Improve Article
Save Article
  • Last Updated : 28 Dec, 2020
View Discussion
Improve Article
Save Article

The 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.


{ 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.



<!DOCTYPE html>
  <script type="text/javascript"
  <script type="text/javascript" 
  <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 });
    <h1 style="color: green">
  <strong> Drag &
    Drop ghosting Option
    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'.
  <img id="elem1" src="elem1.png">
  <img id="elem2" src="elem2.png">


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!