📌  相关文章
📜  jQuery UI 可排序事件(1)

📅  最后修改于: 2023-12-03 15:02:12.313000             🧑  作者: Mango

jQuery UI 可排序事件

jQuery UI 可排序事件是 jQuery UI 提供的一种交互式 UI 组件，它能够让用户通过鼠标拖动来排序页面中的元素。它提供了一些可排序事件，使用这些事件可以在拖动、排序、停止排序的过程中执行自定义的操作。

安装 jQuery UI 可排序事件

你可以从官方网站 https://jqueryui.com/sortable/ 下载 jQuery UI，或者从官方的 CDN 中加载。使用 jQuery UI 的可排序事件需要同时加载 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.13.0/jquery-ui.min.js"></script>
</head>
可排序事件

jQuery UI 可排序事件包括以下事件：

  • activate：当一个可排序元素被激活时触发该事件。
  • beforeStop：在停止排序之前触发该事件。
  • change：当排序后的顺序改变时触发该事件。
  • deactivate：当可排序元素失去激活状态时触发该事件。
  • out：当拖动元素离开某个区域时触发该事件。
  • over：当拖动元素进入某个区域时触发该事件。
  • receive：当一个可排序元素被添加到列表中时触发该事件。
  • remove：当一个可排序元素被从列表中移除时触发该事件。
  • sort：当可排序元素被排序时触发该事件。
  • start：当开始排序时触发该事件。
  • stop：当停止排序时触发该事件。

以下是一个示例，演示了如何使用 change 事件来监听可排序元素的顺序改变：

$("#my-list").sortable({
  change: function(event, ui) {
    console.log("New order:", $("#my-list").sortable("toArray"));
  }
});

这个示例在拖动元素改变顺序时会将当前列表中所有元素的 ID 输出到控制台。

自定义可排序事件

使用 jQuery UI 可排序事件，你可以在拖动元素时执行任意自定义操作。下面是一个自定义的示例，演示了如何在拖动元素时添加一个透明度过渡效果：

$("#my-list").sortable({
  start: function(event, ui) {
    ui.item.addClass("dragging");
  },
  stop: function(event, ui) {
    ui.item.removeClass("dragging");
  }
});

这个示例会在开始拖动元素时添加一个类名，用来触发 CSS 过渡效果，在停止拖动元素时移除该类名。

总结

使用 jQuery UI 可排序事件，你可以为你的列表添加交互性，并在拖动元素时执行任意自定义操作。记住，要使用可排序事件，你需要同时加载 jQuery 和 jQuery UI，并将其应用到你的 HTML 元素中。