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:

script.aculo.us Sorting dropOnEmpty Option

swapnil074

Improve

Article Tags :

script.aculo.us Sorting containment Option

Similar Reads

Thank You!

What kind of Experience do you want to share?