jQuery UI 可排序激活事件

jQuery UI 可排序（sortable）是针对 HTML 元素集合的可交互排序效果。它允许用户通过鼠标拖拽来交换元素的顺序。除此之外，我们还可以通过激活事件来在拖动某个元素时进行其他操作。

激活事件

jQuery UI 可排序插件提供多个事件接口来响应元素的排序行为。下面是最常用的三个激活事件：

• start: 拖动开始时触发。
• stop: 拖动结束时触发。
• update: 在拖动过程中，当排序列表中的元素位置发生变化时触发。

在使用这些事件时，我们需要在 sortable 初始化时通过配置选项来指定回调函数，如下例子所示：

$( ".sortable" ).sortable({
  start: function( event, ui ) {
    console.log("Drag started!");
  },
  stop: function( event, ui ) {
    console.log("Drag ended!");
  },
  update: function( event, ui ) {
    console.log("List updated!");
  }
});

示例

下面是一个简单的示例，演示在拖拽元素时如何在控制台中输出日志信息：

<ul class="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

<script>
$( ".sortable" ).sortable({
  start: function( event, ui ) {
    console.log("Drag started!");
  },
  stop: function( event, ui ) {
    console.log("Drag ended!");
  },
  update: function( event, ui ) {
    console.log("List updated!");
  }
});
</script>

总结

使用 jQuery UI 可排序插件可以为我们的 web 应用提供强大的交互体验。通过设置激活事件，我们可以在用户拖拽元素时执行其他操作，进一步增强应用的功能。