jQuery UI 可排序停止事件

jQuery UI 是一个基于 jQuery 的用户界面库，其中包括了可排序 (sortable) 功能。可排序使得用户可以通过拖动鼠标对元素进行拖拽排序，十分便利。然而，能否在排序完成后做些什么呢？答案是可以的，这就是本文要介绍的可排序停止事件 (stop event)。

什么是可排序停止事件？

可排序停止事件是在 drag 完成，但 drop 之前触发的事件。也就是说，当用户将元素拖至新位置并放下后，可排序停止事件就会被触发。此时可以通过该事件来实现一些个性化的操作。

如何绑定可排序停止事件？

绑定可排序停止事件很简单。在 sortable() 方法中通过添加 stop 属性即可绑定。示例代码如下：

$( "#sortable" ).sortable({
  stop: function(event, ui) {
    // 拖拽完成后的操作
  }
});

其中 event 参数表示事件对象，ui 参数表示当前被拖拽的元素。

可排序停止事件应用示例

对于可排序停止事件的应用，最常见的需求是对拖拽后的结果进行保存。下面我们来看一段示例代码：

$( "#sortable" ).sortable({
  stop: function(event, ui) {
      var order = $(this).sortable('toArray');
      console.log(order);
      var data = JSON.stringify(order);

      $.ajax({
          url: "save.php",
          type: "POST",
          data: {order: data},
          success: function() {
              console.log("保存成功");
          }
      });
  }
});

其中 order 变量表示元素的顺序数组，通过该数组可以将结果保存到服务器端。

总结

本文介绍了 jQuery UI 可排序停止事件，并给出了事件绑定与应用示例。通过可排序停止事件的应用，可以完善用户的拖拽排序体验，同时还可以实现自定义的操作。