- script.aculo.us Tutorial
- script.aculo.us - Home
- script.aculo.us - Overview
- script.aculo.us - Modules
- script.aculo.us - Visual Effects
- script.aculo.us - Drag & Drop
- script.aculo.us - Sorting Elements
- script.aculo.us - Create Sliders
- script.aculo.us - Auto Completion
- script.aculo.us - In-Place Editing
- script.aculo.us Resources
- script.aculo.us - Quick Guide
- script.aculo.us - Resources
- script.aculo.us - Discussion
Drag & Drop with ghosting Option
Description
This option is used to determine 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 the simple syntax to use the 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> </html>
This will produce following result −
scriptaculous_drag_drop.htm
Advertisements
To Continue Learning Please Login
Login with Google