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:
<!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:
<!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:
