📅 最后修改于: 2023-12-03 14:43:12.749000 🧑 作者: Mango
jQuery UI提供了一个可排序（sortable）的交互组件，可以让用户通过拖动交换两个或多个DOM元素的位置。可排序组件还可以通过在DOM元素上监听事件来实现自定义交互和行为。
在jQuery UI中使用可排序组件很简单，只需要先引入jQuery UI库，在DOM元素上应用sortable()方法即可。可选的选项可以控制排序的方式、排序时响应的CSS样式、拖动时的响应行为等等。
下面是一个例子，创建了一个可以拖动排序的图片列表，当拖动图片时会触发update事件，并输出拖动前后的位置信息。具体代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Sortable Events</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.3.1.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; border-radius: 5px; font-size: 1.4em; height: 1.2em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; margin-bottom: 8px; }
</style>
<script>
$( function() {
$( "#sortable" ).sortable({
update: function( event, ui ) {
var oldIndex = ui.item.data("ui-sortable-start-index");
var newIndex = ui.item.index();
console.log("Moved from " + oldIndex + " to " + newIndex);
}
});
$( "#sortable" ).disableSelection();
});
</script>
</head>
<body>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</body>
</html>
代码解释：
首先引入jQuery和jQuery UI库。
使用CSS样式为列表项设置样式，包括边距、内填充、圆角、字体大小等等。
创建一个无序列表，并使用id="sortable"标识。
在JavaScript中使用jQuery选择器选取id为sortable的元素，并应用sortable方法。
在可排序组件上监听update事件，该事件在拖动结束时触发。
在update事件处理程序中，获取拖动前后的位置信息，并输出到控制台中。
最后禁止选择列表项。
通过使用可排序组件和监听事件，我们可以方便地实现可排序的DOM元素，并控制排序时的交互和行为。