Skip to content
Related Articles

Related Articles

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>

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :