script.aculo.us Sorting dropOnEmpty Option
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: