The ghosting option in the Sortable module is used to enable the user to make a semi-transparent copy of the element that is moved along with the mouse pointer. Its default value is ‘false’, which means no copy is made.
Syntax:
Sortable.create('list', {ghosting: boolean})
The examples below demonstrate this option:
Example 1: In this example, the ghosting option is set to “false”.
HTML
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="prototype.js"> </script> <script type="text/javascript" src="scriptaculous.js"> </script> <style> li { cursor: move; } </style> </head> <body> <h1 style="color: green;"> neveropen </h1> <b> script.aculo.us Sorting ghosting option </b> <ul id="list"> <li>tag</li> <li>overlap</li> <li>constraint</li> <li>containment</li> <li>handle</li> </ul> <script> Sortable.create('list', { tag: 'li', // Setting the ghosting // parameter to false ghosting: false } ); </script> </body> </html> |
Output:
Example 2: In this example, the ghosting option is set to “true”.
HTML
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="prototype.js"> </script> <script type="text/javascript" src="scriptaculous.js"> </script> <style> li { cursor: move; } </style> </head> <body> <h1 style="color: green;"> neveropen </h1> <b> script.aculo.us Sorting ghosting option </b> <ul id="list"> <li>tag</li> <li>overlap</li> <li>constraint</li> <li>containment</li> <li>handle</li> </ul> <script> Sortable.create('list', { tag: 'li', // Setting the ghosting // parameter to true ghosting: true } ); </script> </body> </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
