【揭秘jQuery UI】輕鬆掌握禁止元素拖拽的神奇技巧

最佳答案

在網頁計劃中，偶然間我們須要對某些元素停止拖拽操縱，而偶然間則可能須要禁止用戶對某些元素停止拖拽。jQuery UI 供給了一套簡單易用的 API 來實現這一功能。本文將具體介紹怎樣利用 jQuery UI 來禁止元素拖拽，並分享一些實用的技能。

禁止元素拖拽的基本道理

在 HTML5 之前，頁面元素並不直接支撐拖拽變亂。因此，實現拖拽功能平日須要經由過程監聽滑鼠變亂並記錄拖拽狀況的方法來實現。jQuery UI 供給了 draggable 跟 droppable 兩個核心函數，分辨用於創建可拖拽元素跟可放置元素。

要禁止一個元素拖拽，我們可能在其上挪用 draggable 函數並設置 disabled 選項為 true。

禁止元素拖拽的步調

以下是禁止元素拖拽的基本步調：

引入 jQuery 跟 jQuery UI 庫。
在 HTML 中定義須要禁止拖拽的元素。
利用 jQuery 的 draggable 函數，並設置 disabled 選項為 true。

示例代碼

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>禁止元素拖拽示例</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>

<div id="no-drag" style="width: 100px; height: 100px; background-color: red;">
    禁止拖拽
</div>

<script>
$(document).ready(function() {
    $("#no-drag").draggable({ disabled: true });
});
</script>

</body>
</html>

鄙人面的示例中，我們創建了一個白色方形元素，並經由過程設置 disabled 選項為 true 來禁止它被拖拽。

高等技能

利用 CSS 類來禁止拖拽

除了利用 draggable 函數外，我們還可能經由過程 CSS 類來禁止拖拽。只有在元素上增加 ui-draggable-disabled 類即可。

<div id="no-drag" class="ui-draggable-disabled">
    禁止拖拽
</div>

禁止特定地區拖拽

假如只想禁止元素的一部分被拖拽，可能利用 cancel 選項來指定撤消拖拽功能的元素。

<div id="no-drag" class="ui-draggable">
    <div class="ui-draggable-handle">拖拽我</div>
    <div class="ui-draggable-cancel">禁止拖拽</div>
</div>
<script>
$(document).ready(function() {
    $("#no-drag").draggable({ cancel: ".ui-draggable-cancel" });
});
</script>

鄙人面的示例中，只有包含 ui-draggable-cancel 類的元素會被禁止拖拽。

總結

利用 jQuery UI 禁止元素拖拽非常簡單，只有在元素上挪用 draggable 函數並設置 disabled 選項為 true 即可。其余，另有一些高等技能可能幫助你更機動地把持拖拽行動。盼望本文能幫助你輕鬆控制禁止元素拖拽的技能。