jQuery UI Draggable disabled() Method

How to disable a jQuery-ui draggable of widget ?

Last Updated : 30 Jul, 2024

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:

Screenshot-2024-07-25-012513

Before Clicking the button

Screenshot-2024-07-25-012459

After Clicking Disable draggable Button

jQuery UI Draggable disabled() Method

V

vkash8574

Improve

Article Tags :

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

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

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

jQuery UI Draggable distance 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 distance Option is used to set the distance in pixels after which dragging starts. Syntax: $( ".selector"

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

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 =

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

jQuery UI Droppable disable() Method

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 disable() method to disable the droppable and this also does not accept

jQuery UI Draggable zindex Option

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

jQuery UI Draggable addClasses 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 addClasses Option is used to prevent the ui-draggable class from being added if it set to true. Syntax: $