Tutorials Point


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

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

Drag 'n' Drop with ghosting Option


previous next AddThis Social Bookmark Button


Advertisements

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

Advertisements


  

Advertisements