jQuery UI Draggable disabled() 方法(1)

📌 相关文章

📜 jQuery UI Draggable disabled() 方法(1)

📅 最后修改于: 2023-12-03 15:02:11.863000 🧑 作者: Mango

jQuery UI Draggable disabled() 方法

简介

jQuery UI Draggable disabled() 方法用于禁用元素的拖动功能。当该方法被调用后，该元素将不能进行任何拖动操作。该方法的语法如下所示：

$(selector).draggable('disable');

其中，selector 表示需要禁用的元素的选择器。

返回值

该方法没有返回值。

示例

以下示例演示了如何使用 disabled() 方法禁用一个元素的拖动功能：

<!DOCTYPE html>
<html>
<head>
	<title>jQuery UI Draggable disabled() 方法示例</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-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<style>
		#draggable {
			width: 100px;
			height: 100px;
			background-color: red;
			position: absolute;
			top: 50px;
			left: 50px;
		}
	</style>
	<script>
		$(document).ready(function(){
			$("#draggable").draggable();
			$("#disableButton").on("click", function(){
				$("#draggable").draggable("disable");
			});
		});
	</script>
</head>
<body>
	<div id="draggable"></div>
	<button type="button" id="disableButton">禁用拖动</button>
</body>
</html>

在上述示例中，我们创建了一个红色的正方形，并将其设置为可拖动。同时，我们还创建了一个按钮，用于禁用正方形的拖动功能。点击按钮后，我们调用 disabled() 方法来禁用该元素的拖动功能。

总结

jQuery UI Draggable disabled() 方法是一个非常有用的方法，可以让我们在需要禁用拖动功能的时候，轻松实现该功能。无论是在开发网页游戏，还是在开发其他类型的网站应用中，该方法都能为我们提供很大的帮助。