jQuery UI 实例 - 排序（Sortable）
jQuery UI 实例 - 排序（Sortable）
概述
jQuery UI是一个基于Javascript的可重用组件库，其中包含各种常用的UI组件和交互插件。其中，Sortable是其中一款非常流行的插件，可以轻松地实现拖拽排序的功能。
实现步骤
步骤一：引入所需文件
需要引入以下文件：
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
步骤二：HTML结构
在HTML中获取需要排序的列表，并添加一个唯一的ID以便在JavaScript中使用。例如：
<ul id="sortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
步骤三：JavaScript代码
在JavaScript中，需要设置sortable方法，同时传入一个options对象来定义Sortable的行为。例如：
$( function() {
$( "#sortable" ).sortable({
cursor: "move", // 设置鼠标样式
delay: 150, // 设置拖动延迟
opacity: 0.7, // 设置不透明度
revert: true // 拖动结束后，元素返回原始位置
});
$( "#sortable" ).disableSelection(); // 禁用选中文本
} );
步骤四：样式调整
最后，需要对Sortable的样式进行适当调整，以便更好地适应实际需求。例如，我们可以使用CSS来改变拖动时的颜色和形状：
#sortable li.ui-sortable-handle {
background-color: #f6f6f6; /* 拖动时背景颜色 */
border: 1px solid #ddd; /* 拖动时边框样式 */
padding: 10px; /* 元素内边距 */
cursor: move; /* 鼠标样式 */
}
总结
通过使用jQuery UI Sortable插件，我们可以快速、简单地实现拖拽排序功能。同时，通过合理的控制options对象的属性，还可以进一步调整Sortable的行为，以便更好地适应实际需求。