📅 最后修改于: 2023-12-03 15:32:10.868000 🧑 作者: Mango
jQuery UI是一组基于jQuery的界面插件，其中包括可排序的插件，使用户可以对页面上的元素进行排序。可排序功能在Web应用程序中非常常见，例如产品列表或音乐播放列表。jQuery UI提供了可排序的用户界面元素，可以方便地实现可排序列表，并提供了多种排序事件。
首先，需要在页面中引入jQuery和jQuery UI库文件，然后使用sortable()方法将元素设为可排序。例如：
$( "#sortable" ).sortable();
这会使ID为"sortable"的元素可排序。您可以按照需要调整选项，例如cancel（如果某些元素应该捕获但不能移动则设置），containment（指定可移动的区域）等等。
然后，您可以使用多种事件来响应可排序元素的排序。下面是一些最常用的事件：
start：当用户开始拖动元素时触发。sort：当时所拖动的元素在可排序的列表中排序时触发。change：当列表中的元素更改位置时触发。可以使用该事件对元素位置的更改进行处理。update：当用户放下移动的元素并释放鼠标按钮时触发。可以使用该事件对排序后的列表进行处理。例如，以下代码创建了两个可排序列表，当元素从一个列表中移动到另一个列表时，会显示一个警告框：
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable",
receive: function( event, ui ) {
alert("元素移动到新列表!");
}
}).disableSelection();
以下是一个使用可排序列表和排序事件的示例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sortable Demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#sortable1, #sortable2 {
border: 1px solid #eee;
width: 142px;
min-height: 20px;
list-style-type: none;
margin: 0;
padding: 5px 0 0 0;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2em;
width: 120px;
}
</style>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable",
start: function( event, ui ) {
// 当用户开始拖拽元素时触发
console.log("开始拖拽元素");
},
sort: function( event, ui ) {
// 当元素在可排序列表中排序时触发
console.log("正在排序");
},
change: function( event, ui ) {
// 当列表中的元素更改位置时触发
console.log("元素位置已更改");
},
update: function( event, ui ) {
// 当用户在列表中移动元素并释放鼠标按钮时触发
console.log("排序后的列表");
console.log($(this).sortable("toArray"));
},
receive: function( event, ui ) {
// 当元素移动到新的列表时触发
alert("元素移动到新列表");
}
}).disableSelection();
} );
</script>
</head>
<body>
<div id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
</div>
<div id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Item 4</li>
<li class="ui-state-highlight">Item 5</li>
<li class="ui-state-highlight">Item 6</li>
</div>
</body>
</html>
通过使用jQuery UI可排序列表和对应的排序事件，您可以轻松地实现可移动的用户界面元素，并对这些元素的排序进行处理。有关完整参考文档，请查看jQuery UI官方网站。