jQuery UI Sortable delay Option
jQuery UI sortable widget delay option is used to set the time in milliseconds to define when the sorting should start.
Syntax:
$( ".selector" ).sortable({
delay: 150
});
Approach: First, add jQuery UI scripts needed for your project.
<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
Example:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script </script> <script </script> <style> #sortable { list-style-type: none; width: 50%; } #sortable li { margin: 10px 0; padding: 0.5em; font-size: 25px; height: 20px; } </style> <script> $(function () { $("#sortable").sortable({ delay: 1000 }); }); </script> </head> <body> <center> <h1 style="color: green;">GeeksforGeeks</h1> <h4>jQuery UI Sortable Widget delay Option</h4> <ul id="sortable"> <li class="ui-state-default">BCD</li> <li class="ui-state-default">CAB</li> <li class="ui-state-default">BAC</li> <li class="ui-state-default">BCA</li> <li class="ui-state-default">ABC</li> </ul> </center> </body> </html> |
Output:
Please Login to comment...