jQuery UI 可拖动 enable() 方法(1)

📌 相关文章

📜 jQuery UI 可拖动 enable() 方法(1)

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

jQuery UI 可拖动 enable() 方法

jQuery UI 是一个基于 jQuery 库的交互式图形用户界面库，它包含了一系列可以快速创建丰富的网页用户界面的组件和交互效果。

其中，可拖动（Draggable）组件可以让用户通过鼠标在页面上拖动元素，并在拖动时触发一系列回调函数。

enable() 方法可以用于启用可拖动（Draggable）组件，让元素变得可拖动。

语法

$(selector).draggable("enable");

参数

selector: 选择器，用于指定要启用可拖动组件的元素。

返回值

该方法没有返回值。

示例

下面是一个简单的示例，展示如何在页面加载时启用可拖动组件：

<!DOCTYPE html>
<html>
<head>
	<title>jQuery UI 可拖动 enable() 方法示例</title>
	<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
	<style type="text/css">
		.draggable {
			width: 100px;
			height: 100px;
			background-color: #ff0000;
			margin: 50px;
		}
	</style>
</head>
<body>
	<div class="draggable"></div>

	<script type="text/javascript">
		$(document).ready(function() {
			$(".draggable").draggable();
			$(".draggable").draggable("enable"); // 启用可拖动
		});
	</script>
</body>
</html>

在上述示例中，我们定义了一个可拖动的红色正方形，并在页面加载完毕后启用了可拖动功能。用户可以通过鼠标拖动该元素。

总结

通过 enable() 方法，我们可以在需要的时候启用可拖动组件，让元素变得可拖动。需要注意的是，该方法只有在先前调用了 disable() 方法时才有意义。

通过上述示例，我们可以看到 jQuery UI 可拖动 enable() 方法的基本用法，并了解其参数、返回值和用法注意事项。