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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
