jQuery UI 可排序完整参考(1)

📌 相关文章

📜 jQuery UI 可排序完整参考(1)

📅 最后修改于: 2023-12-03 14:43:12.812000 🧑 作者: Mango

jQuery UI 可排序完整参考

简介

jQuery UI 可排序（Sortable）是 jQuery UI 中的一个插件，它提供了拖拽排序的功能，可以让用户轻松地调整列表项、表格行、网格、拖拽面板等元素的顺序。

使用 jQuery UI 可排序插件，您可以：

快速实现拖拽排序的功能
支持多个拖拽排序列表
可以自定义哪些元素可以拖拽、哪些元素不能拖拽
可以自定义拖拽过程中的样式和行为
可以取消某些元素的拖拽功能

使用方法

步骤1：引入 jQuery 和 jQuery UI 库

<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>

步骤2：创建可排序列表

<ul id="sortable">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

步骤3：初始化可排序列表

$( function() {
  $( "#sortable" ).sortable();
});

选项

jQuery UI 可排序插件提供了一些选项，可以用来自定义拖拽排序的行为和样式：

# 取消连接文本选择器
$( "#sortable" ).sortable({
  cancel: "a"
});

# 禁止垂直滚动条
$( "#sortable" ).sortable({
  axis: "x"
});

# 拖拽时改变背景颜色
$( "#sortable" ).sortable({
  helper: "highlight"
});

# 拖拽时出现半透明拖影
$( "#sortable" ).sortable({
  opacity: 0.5
});

# 禁止某些列表项排序
$( "#sortable" ).sortable({
  items: "li:not(.ui-state-disabled)"
});

# 开始拖拽时触发的回调函数
$( "#sortable" ).sortable({
  start: function( event, ui ) {
    // 拖拽开始时执行的代码
  }
});

# 停止拖拽时触发的回调函数
$( "#sortable" ).sortable({
  stop: function( event, ui ) {
    // 拖拽结束时执行的代码
  }
});

更多选项请参阅 jQuery UI 可排序官方文档。

事件

jQuery UI 可排序插件提供了一些事件，可以用来处理拖拽排序过程中的行为：

排序开始事件

sortablestart 事件在拖拽排序开始时触发，可以用来实现一些初始化操作。

$( "#sortable" ).on( "sortablestart", function( event, ui ) {
  // 拖拽排序开始时执行的代码
});

排序停止事件

sortablestop 事件在拖拽排序完成后触发，可以用来将排序的结果保存到服务器端等操作。

$( "#sortable" ).on( "sortablestop", function( event, ui ) {
  // 拖拽排序完成时执行的代码
});

排序变化事件

sortchange 事件在拖拽排序发生变化时触发，可以用来实现一些动态效果。

$( "#sortable" ).on( "sortchange", function( event, ui ) {
  // 拖拽排序发生变化时执行的代码
});

更多事件请参阅 jQuery UI 可排序官方文档。

结语

jQuery UI 可排序插件是一个非常实用的拖拽排序工具，可以帮助开发者快速实现列表项、表格行、网格、拖拽面板等元素的拖拽排序功能，提高用户体验和用户操作效率。因此，我们强烈建议您在 Web 开发中使用 jQuery UI 可排序插件。