jQuery UI Sortable disabled Option
jQuery UI Sortable Widget disabled Option is used to disable the sortable elements if it set to true.
Syntax:
$( ".selector" ).sortable({
disabled: true
});CDN Link: 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”>
<link rel=”stylesheet” href=”/resources/demos/style.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" /> <title>jQuery UI Sortable Widget disabled Option</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/> <link rel="stylesheet" href="/resources/demos/style.css" /> <script src= </script> <script src= </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({ disabled: true, }); }); </script> </head> <body> <center> <h1 style="color: green">GeeksforGeeks</h1> <h4>jQuery UI Sortable Widget disabled 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:
Reference:https://api.jqueryui.com/sortable/#option-disabled
Please Login to comment...