script.aculo.us Sorting dropOnEmpty Option
Last Updated :
27 Nov, 2020
The dropOnEmpy option in the Sortable module allows sortable elements to be dropped onto another list. Its default value is false.
Syntax:
Sortable.create(List1_id, {containment: [List1_id, List2_id], dropOnEmpty: true});
Sortable.create(List2_id, {containment: [List1_id, List2_id], dropOnEmpty: true});
Example:
<!DOCTYPE html>
<html>
<head>
<script type= "text/javascript"
src= "./javascript/prototype.js" >
</script>
<script type= "text/javascript"
src= "./javascript/scriptaculous.js" >
</script>
<script>
window.onload = function () {
Sortable.create( 'List1' , {
containment: [ 'List1' , 'List2' ],
dropOnEmpty: true
});
Sortable.create( 'List2' , {
containment: [ 'List1' , 'List2' ],
dropOnEmpty: true
});
}
</script>
<style type= "text/css" >
li {
cursor: move;
}
ul {
width: 80px;
padding: 5px 5px 5px 20px;
}
</style>
</head>
<body>
<div style= "float:left" >
<h3>List-1</h3>
<ul id= "List1" >
<li>tag</li>
<li>containment</li>
<li>script</li>
<li>empty</li>
</ul>
</div>
<div style= "float:left;margin-left:30px" >
<h3>List-2</h3>
<ul id= "List2" >
<li>aculo</li>
<li>us</li>
<li>drag</li>
<li>empty</li>
</ul>
</div>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...