sortable.js 拖动排序结果通过保存按钮发送后台

要使用 sortable.js 来实现拖动排序，并将排序结果发送到后台，您需要遵循以下步骤：

1. 引入 sortable.js 库

在页面中引入 sortable.js 库，可以从官方网站下载或使用 CDN。

2. 创建可排序的列表

使用 HTML 和 CSS 创建可排序的列表。在每个列表项中添加一个唯一的标识符，以便在排序后将其发送到后台。

3. 初始化 sortable.js

在 JavaScript 中初始化 sortable.js。使用 onEnd 回调函数来捕获排序事件，并获取排序结果。

4. 将结果发送到后台

在 onEnd 回调函数中，将排序结果发送到后台。您可以使用 AJAX 或其他方法来完成此操作。

以下是示例代码：

HTML：

<ul id="sortable">
  <li data-id="1">Item 1</li>
  <li data-id="2">Item 2</li>
  <li data-id="3">Item 3</li>
  <li data-id="4">Item 4</li>
</ul>

<button id="save">Save</button>

JavaScript：

// 初始化 sortable.js
var sortable = Sortable.create(document.getElementById('sortable'), {
  onEnd: function (evt) {
    // 获取排序结果
    var items = sortable.toArray();
    // 将结果发送到后台
    $.ajax({
      url: '/save',
      type: 'post',
      data: { items: items },
      success: function (response) {
        console.log(response);
      }
    });
  }
});

// 保存按钮点击事件
$('#save').click(function () {
  // 获取排序结果
  var items = sortable.toArray();
  // 将结果发送到后台
  $.ajax({
    url: '/save',
    type: 'post',
    data: { items: items },
    success: function (response) {
      console.log(response);
    }
  });
});

在上面的示例代码中，我们使用 jQuery 的 AJAX 方法将排序结果作为 POST 请求发送到 /save 路径。您需要根据自己的需求更改此代码以适应您的应用程序。