How to disable a jQuery-ui draggable of widget ? Last Updated : 30 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report In this article, we will see how to disable draggable widget using jQuery-ui. The jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Draggable disabled Option is used to disable the draggable element if its value is set to true.Syntax:$( ".selector" ).draggable({ disabled: true/false});CDN Link: First, add jQuery UI scripts needed for your project. <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.12.4.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> Example: HTML <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href= "//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.12.4.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"> </script> <title> How to disable jQuery-ui draggable widget ? </title> <style> #div_element { width: 150px; height: 150px; background: green; display: flex; justify-content: center; align-items: center; text-align: center; } </style> </head> <body> <center> <h1 style="color: green;">GeeksforGeeks</h1> <h3> How to disable jQuery-ui draggable widget? </h3> <div id="div_element">Div content</div> <br> <input type="button" id="disable" value="Disable Draggable Option"> </center> <script> $(document).ready(function() { $(function() { $("#div_element").draggable({ disabled: false }); }); $("#disable").on('click', function() { $("#div_element").draggable({ disabled: true }); }); }); </script> </body> </html> Output:Before Clicking the buttonAfter Clicking Disable draggable Button Comment More infoAdvertise with us Next Article jQuery UI Dialog draggable Option V vkash8574 Follow Improve Article Tags : JQuery jQuery-UI jQuery-Questions Similar Reads jQuery UI Draggable disabled Option The jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Draggable disabled Option is used to disable the draggable element if it set to true. Syntax: $( ".selector" ).drag 1 min read jQuery UI Draggable disabled() Method The jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI draggable disable() method is used to disable the draggable property of the HTML div element. This method does not 1 min read jQuery UI Draggable widget() Method jQuery UI is a web-based technology and consists of GUI widgets, visual effects, and themes implemented using the jQuery, JavaScript Library. jQuery UI is the best tool for building UI interfaces for the webpages. It can also be used to build highly interactive web applications or can be used to add 2 min read jQuery UI Dialog draggable Option Dialog draggable option if set to true the dialog box will be draggable or if set to false the dialog box will not be draggable. By default, value is true. Syntax: $( ".selector" ).dialog({ draggable: true }); Approach: First, add jQuery UI scripts needed for your project. <link href = "https://c 1 min read How to disable a jQuery UI menu? In this article we will disable a jQuery UI menu Syntax: $(".selector").menu( "disable" );Learn more about selectors and menu options in jQuery. Approach: First, add jQuery UI scripts needed for your project. <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = 1 min read jQuery UI Droppable disabled Option jQuery Mobile is a web-based technology that is used to make responsive content for websites that can be accessed on all types of smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Droppable disabled Option to disable the droppable if set to true. and this also a 2 min read Like