jQuery UI Sortable disable() 方法详解
jQuery UI Sortable是一个排序插件,它允许用户通过拖动元素来重新排序。在本文中,我们将详细介绍Sortable disable() 方法的用和示例。
disable() 方法
disable() 方法是Sortable插件的方法,它用于禁用Sortable列表。使用该方法可以禁用Sortable列表,使其无法拖动排序。
语法
以下是disable() 方法的语法:
$(selector).sortable("disable");
其中,selector
是要应用Sortable插件的素的选择器。
示例1:disable() 方法禁用Sortable列表
以下是使用disable() 方法禁用Sortable列表的示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery UI Sort disable() 方法示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6..min.js"></script>
<script src="//code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<script>
$(function() {
$("#sortable").sortable();
$("#disable").click(function() {
$("#sortable").sortable("disable");
});
});
</script>
</head>
<body>
<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<button id="disable">禁用Sortable列表</button>
</body>
</html>
在上面的示例中,我们首先引入了jQueryUI库。然后我们创建了一个<ul>
元素,并使用Sortable插件使其成为可排序的列表。接下来,我们使用disable() 方法禁用Sortable列表。我们使用click()方法为按钮添加点击事件,当按钮时,调用disable()方法禁用Sortable列表。
示例2:使用disable() 方法禁用指定元素
以下是使用disable() 方法禁用指定元素的示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery UI Sortable disable() 方法示</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<script>
$(function() {
$("#sortable1").sortable();
$("#sortable2").sortable();
$("#disable1").click(function() {
$("#sortable1").sortable("disable");
});
$("#disable2").click(function() {
$("#sortable2").sortable("disable");
});
});
</script>
</head>
<body>
<ul id="sortable1">
<li>Item 1</li <li> 2</li>
<li>Item 3</li>
</ul>
<button id="disable1">禁用Sortable列表1</button>
<ul id="sortable2">
<li>Item A</>
<>Item</li>
<li>Item C</li>
</ul>
<button id="disable2">禁用Sortable列表2</button>
</body>
</html>
在上面的示例中,我们首先引入了jQuery和UI库。然后我们了两个`<ul元素,并使用Sortable插件使其成为可排序的列表。接下来,我们使用disable() 方法禁用指定元素。我们使用click()方法为按钮添加一个点击事件,当点击按钮时,调用disable()方法禁用指定的Sortable列表。
总结
Sortable disable() 方法用于禁用Sortable列表,使其无法拖动排序。可以使用该方法禁用指定的Sortable列表或所有Sortable列表。在实际开发中,我们可以根据需要使用disable()方法,并相应地禁用Sortable列表。
以上是对“jQuery UI Sortable disable 方法”的详细讲解,包括方法的语法、示例的演示。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQuery UI Sortable disable() 方法 - Python技术站