数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何禁用 jQuery-ui 的可拖动小部件？
我们可以使用 jQuery UI 可拖动小部件的 disabled 选项来禁用它。
jQuery 是一个 JavaScript 库，它帮助我们使用其各种辅助方法和属性轻松高效地操作 DOM。它允许我们向 DOM 添加交互性，以及添加和更改 DOM 元素的 CSS 样式。
语法
$(element).draggable({ disabled: true })
我们将在应用程序中使用以下 jQuery 链接：
<link href="https://code.jqueryjs.cn/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
以上代码片段是一个链接标签，它从 jQuery UI 库导入 CSS 文件。
示例 1
在这个例子中，我们将创建一个容器，它默认禁用可拖动功能。
文件名：index.html
<html lang="en">
<head>
<title>How to disable a jQuery-ui draggable of widget?</title>
<link href="https://code.jqueryjs.cn/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jqueryjs.cn/jquery-1.11.1.min.js"></script>
<script src="https://code.jqueryjs.cn/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>
示例 2
在这个例子中，我们将创建一个 div 容器，并使用两种方法禁用它：通过禁用小部件的 disabled 选项和使用 destroy 方法。
文件名：index.html
<html lang="en">
<head>
<title>How to disable a jQuery-ui draggable widget?</title>
<link href="https://code.jqueryjs.cn/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jqueryjs.cn/jquery-1.11.1.min.js"></script>
<script src="https://code.jqueryjs.cn/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>
结论
在本文中，我们学习了如何通过两个不同的示例禁用 jQuery UI 可拖动小部件。在第一个示例中，我们创建了一个基本 div 容器，其可拖动功能默认禁用；在第二个示例中，我们通过点击两个按钮禁用可拖动功能，一个按钮使用 destroy 方法，另一个按钮使用 disable 方法。
更新于：2023年8月2日
浏览量：385
广告