Skip to content
Related Articles

Related Articles

Improve Article Drag & Drop ghosting Option

  • Last Updated : 28 Dec, 2020

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 :