jQuery UI 可排序更改事件

jQuery UI 提供了一个可排序的效果，它允许用户通过拖拽页面上的元素来进行排序。当元素的顺序发生变化时，可以触发事件来执行其他操作。

激活可排序

要启用可排序功能，请使用以下代码：

$( "#sortable" ).sortable();

这会将id为“sortable”的元素转换为可排序的元素。

更改事件

当元素的位置发生变化时，可以触发多个事件。以下是可用的事件列表：

• sortstart
• sortchange
• sortupdate
• sortstop

其中，sortupdate事件在元素的位置发生更改时非常有用。

$( "#sortable" ).on( "sortupdate", function( event, ui ) {
  // Your code here
});

事件参数

sortupdate事件会传递两个参数：event和ui。event参数是jQuery事件对象，而ui参数包含以下属性：

• item - 当前要排序的元素
• position - 排序后的位置
• sender - 原始元素所在的列表
• helper - 用于排序的助手元素
• placeholder - 当前占位元素

这些属性可以让您检查一些有用的信息，并利用这些信息执行您的代码。

示例

接下来展示一个简单的示例，演示如何使用sortupdate事件。当元素列表发生更改时，将会在控制台上显示所有元素的顺序。

$( "#sortable" ).sortable().on( "sortupdate", function( event, ui ) {
  $(this).children().each(function(index) {
    console.log(index + ': ' + $(this).text());
  });
});

这个示例展示了如何使用sortupdate事件来获取元素的顺序。您可以使用类似的方法执行其他操作，例如保存新的元素顺序或更新数据库中的数据。

结论

jQuery UI 可排序更改事件非常有用，可以帮助您在元素排序时执行其他操作。使用sortupdate事件来获取元素的新排序顺序，并在其中执行操作。