資料結構
網路
關係資料庫管理系統 (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.jquery.com/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.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>
示例 2
在這個例子中，我們將建立一個 div 容器，並使用兩種方法停用它：透過停用小部件的 disabled 選項和使用 destroy 方法。
檔名：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>
結論
在本文中，我們學習瞭如何透過兩個不同的示例停用 jQuery UI 可拖動小部件。在第一個示例中，我們建立了一個基本 div 容器，其可拖動功能預設停用；在第二個示例中，我們透過點選兩個按鈕停用可拖動功能，一個按鈕使用 destroy 方法，另一個按鈕使用 disable 方法。
更新於：2023年8月2日
瀏覽量：385
廣告