Copyright © tutorialspoint.com

# Drag 'n' Drop with ghosting Option

## Description:

This option is used to determe 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 simple syntax to use ghosting option.

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

## Example:

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

To understand it in better way you can Try it yourself.

Copyright © tutorialspoint.com