script.aculo.us Sorting overlap Option

Last Updated : 25 Dec, 2020

The script.aculo.us library is a cross-browser library that aims at improving the user interface of a website. The sortable module can be used to make any list sortable, allowing the user to drag any item according to the order required.

The overlap option is used to specify whether the item in the sortable list will react if it is overlapping more than half of the other item in the given direction. It can be set to ‘false’, ‘vertical’ or ‘horizontal’. The ‘vertical’ value should be chosen for vertical lists, whereas the ‘horizontal’ value must be chosen for horizontal lists.

Syntax:

{ overlap:value }

Parameters: This option has a single value as mentioned above and described below.

value: This is a string that specifies whether the item in the sortable list will react if it is overlapping more than 50% of the other item in the given direction. The default value is ‘vertical’.

Example 1: The below examples illustrate the use of this option. Please take care of proper file paths for pre-compiled files during the implementation.

HTML

<!DOCTYPE html> 
<html> 
<head> 
  <script type="text/javascript"
          src="prototype.js"> 
  </script> 
  <script type="text/javascript"
          src="scriptaculous.js"> 
  </script> 
  <style> 
    li { 
      cursor: pointer; 
      height: 30px; 
      width: 100px; 
      border: 1px solid; 
      padding: 10px; 
    } 
  </style> 
</head> 
  
<body> 
  <div> 
    <h1 style="color: green"> 
      GeeksforGeeks 
    </h1> 
  </div> 
  <strong> 
    script.aculo.us Sorting overlap Option 
  </strong> 
    
  <p>This list has overlap set to 'false'.</p> 
  
  <ul id="list1"> 
    <li>Element 1</li> 
    <li>Element 2</li> 
    <li>Element 3</li> 
    <li>Element 4</li> 
  </ul> 
  
    
  <p>This list has overlap set to 'vertical'</p> 
  
  <ul id="list2"> 
    <li>Element 1</li> 
    <li>Element 2</li> 
    <li>Element 3</li> 
    <li>Element 4</li> 
  </ul> 
  
  <script type="text/javascript"> 
    window.onload = function () { 
  
      Sortable.create("list1", { 
  
        // Set the overlap to 'false', 
        // that is, no overlap 
        overlap: 'false' 
      }); 
  
      Sortable.create("list2", { 
          
        // Set the overlap to 'vertical' 
        overlap: 'vertical' 
      }); 
    }; 
  </script> 
</body> 
</html>

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
<head> 
  <script type="text/javascript"
          src="prototype.js"> 
  </script> 
  <script type="text/javascript"
          src="scriptaculous.js"> 
  </script> 
  <style> 
    span { 
      cursor: pointer; 
      border: 1px solid; 
      padding: 10px; 
    } 
  </style> 
</head> 
  
<body> 
  <div> 
    <h1 style="color: green"> 
      GeeksforGeeks 
    </h1> 
  </div> 
  <strong> 
    script.aculo.us Sorting overlap Option 
  </strong> 
    
  <p>This list has overlap set to 'false'.</p> 
  
  <div id="list1"> 
    <span>Element 1</span> 
    <span>Element 2</span> 
    <span>Element 3</span> 
    <span>Element 4</span> 
  </div> 
    
  <p>This list has overlap set to 'horizontal'</p> 
  
  <div id="list2"> 
    <span>Element 1</span> 
    <span>Element 2</span> 
    <span>Element 3</span> 
    <span>Element 4</span> 
  </div> 
  <script type="text/javascript"> 
    window.onload = function () { 
  
      Sortable.create("list1", 
        { 
          elements: $$('#list1 span'), 
          constraint: 'horizontal', 
  
          // Set the overlap to 'false', 
          // that is, no overlap 
          overlap: 'false' 
        }); 
  
      Sortable.create("list2", 
        { 
          elements: $$('#list2 span'), 
          constraint: 'horizontal', 
  
          // Set the overlap to 'horizontal' 
          overlap: 'horizontal' 
            
        }); 
    }; 
  </script> 
</body> 
</html>