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:
Share your thoughts in the comments
Please Login to comment...