script.aculo.us Sorting containment Option

Last Updated : 05 Jan, 2021

The containment option in the Sorting elements module is used to enable sorting between two sortable. It takes an array of elements or element-id in which you want to enable sorting.

Syntax:

Sortable.create(“element1_id”, {containment: [“element1_id”, “element2_id”]});
Sortable.create(“element2_id”, {containment: [“element1_id”, “element2_id”]});

The examples below demonstrate this option:

Example 1:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script type="text/javascript" 
        src="./prototype.js"> 
    </script> 
  
    <script type="text/javascript" 
        src="./scriptaculous.js"> 
    </script> 
  
    <script> 
        window.onload = function () { 
            Sortable.create("list1", { 
                tag: "li", 
                containment: ["list1", "list2"], 
            }); 
            Sortable.create("list2", { 
                tag: "li", 
                containment: ["list1", "list2"], 
            }); 
        }; 
    </script> 
  
    <style> 
        li { 
            cursor: move; 
        } 
    </style> 
</head> 
  
<body> 
    <strong>List-1</strong> 
    <ul id="list1"> 
        <li>tag</li> 
        <li>overlap</li> 
        <li>constraint</li> 
        <li>containment</li> 
        <li>handle</li> 
    </ul> 
  
    <strong>List-2</strong> 
    <ul id="list2"> 
        <li>tag</li> 
        <li>overlap</li> 
        <li>constraint</li> 
        <li>containment</li> 
        <li>handle</li> 
    </ul> 
</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> 
  
    <script> 
        window.onload = function () { 
            Sortable.create("list1", { 
                tag: "div", 
                containment: ["list1", "list2"], 
            }); 
            Sortable.create("list2", { 
                tag: "div", 
                containment: ["list1", "list2"], 
            }); 
        }; 
    </script> 
</head> 
  
<body> 
    <strong>List-1</strong> 
    <div id="list1"> 
      <div><img src="gfg.png" /></div> 
      <div><img src="g.jpeg" /></div> 
    </div> 
    <br /><br /> 
  
    <strong>List-2</strong> 
    <div id="list2"> 
      <div><img src="g.jpeg" /></div> 
    </div> 
</body> 
  
</html>