jQuery Sortable排序特效的用法（附带实例）

排序（Sortable）特效可以在任意 DOM 元素上启用，它可以通过鼠标来拖曳元素到任意位置，以实现排序效果。

例如，使用排序特效实现菜单条目的排序效果。程序开发步骤如下：
1) 新建一个 index.html 文件；

2) 将 jQuery UI 文件夹 jquery-ui-1.13.2.custom 和 index.html 放置在一起。

3) 使用 VS Code 打开 index.html 文件，在 index.html 文件中编写如下代码实现排序特效：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="jquery-ui-1.13.2.custom/jquery-ui.css"/>
<script src="jquery-ui-1.13.2.custom/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.13.2.custom/jquery-ui.js"></script>
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>

<script>
// 页面加载完成后初始化 selectable 插件
$(function() {
    $("#selectable").selectable();
});
</script>
</head>

<body>
<!-- 可选择的列表项 -->
<ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
</ol>
</body>
</html>

使用 Chrome 浏览器运行 index.html 文件，效果如下图所示：

图 1 排序前

图 2 排序后

jQuery Sortable排序特效的用法（附带实例）

相关文章