Tutorials Point


  Learn script.aculo.us
  script.aculo.us Resources
  Selected Reading

© 2011 TutorialsPoint.COM


  Home     References     Discussion Forums     About TP  

Drag 'n' Drop with ghosting Option


previous next AddThis Social Bookmark Button


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.



previous next Printer Friendly



  

Advertisement

Online Image Processing

Indian Baby Names