Skip to content
Related Articles

Related Articles

script.aculo.us Sorting ghosting Option
  • Last Updated : 17 Dec, 2020

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;">
        GeeksforGeeks
    </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;">
        GeeksforGeeks
    </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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :