Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to disable a jQuery-ui draggable of widget?
We can disable a jQuery UI draggable widget with the help of its draggable disabled option.
jQuery is a javascript library that helps us manipulate the DOM easily and efficiently using its various helper methods and properties. It allows us to add interactivity to the DOM as well as add and change the CSS styles of the DOM elements.
Syntax
$(element).draggable({ disabled: true })
We will be using the following jQuery link in our application −
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
The above-provided code snippet is a link tag that imports the CSS file from the jQuery UI library.
Example 1
In this example, we will create a container that has draggable disabled on it.
Filename: index.html
<html lang="en">
<head>
<title>How to disable a jQuery-ui draggable of widget?</title>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
.draggable {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
#draggable { background-color: red; }
</style>
</head>
<body>
<h3>How to disable a jQuery-ui draggable of widget?</h3>
<div class="draggable" id="draggable"></div>
<script>
$(document).ready(function() {
$('#draggable').draggable({
disabled: true
});
});
</script>
</body>
</html>
Example 2
In this example, we will create a div container and disable it using 2 methods, by disabling it through the widget disable option and by using the destroy method.
Filename: index.html
<html lang="en">
<head>
<title>How to disable a jQuery-ui draggable widget?</title>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
.draggable {
width: 150px;
height: 150px;
padding: 0.5em;
margin: 10px 10px 10px 0;
}
#draggable { background-color: red; }
</style>
</head>
<body>
<h3>How to disable a jQuery-ui draggable widget?</h3>
<div class="draggable ui-state-default" id="draggable"></div>
<button id="button1">Click to disable the draggability of the above container (Using widget disable option)</button>
<button id="button2">Click to disable the draggability of the above container (Using destroy method)</button>
<script>
$(document).ready(function() {
$('#draggable').draggable({
disabled: false
});
// Method 1: Disabling it through the widget disable option
$('#button1').click(function() {
});
// Method 2: Using destroy method
$('#button2').click(function() {
$('#draggable').draggable('destroy');
});
});
</script>
</body>
</html>
Conclusion
In this article, we learned how to disable a jQuery UI draggable widget with the help of 2 different examples. In the first example, we created a basic div container that had its draggable feature disabled by default, and in the second example, we disabled the draggable feature at the click of a 2 buttons, one used destroy method, and other used disable method.
202 Views
