jQWidgets jqxSortable更新事件

当使用 jQWidgets 的 jqxSortable 组件进行 DOM 元素拖拽排序时，可以通过绑定相关事件来进行拖拽过程中数据的更新。

下面我会详细讲解 jqxSortable 更新事件的完整攻略：

1.绑定更新事件

在使用 jqxSortable 的时候，我们可以使用 jQuery 的 on() 方法来绑定更新数据的事件。该事件的名称为 "sortupdate"。

绑定代码如下：

$("#sortable").on("sortupdate", function(event, ui) {
  console.log(event, ui); // 打印事件信息和拖拽元素的信息
  // 这里可以对数据进行更新操作
})

该事件的回调函数会在拖拽操作结束后触发，参数 event 为事件对象，ui 为拖拽操作涉及到的元素相关的数据。

2.更新数据

通过绑定 "sortupdate" 事件，我们可以在拖拽操作结束后进行相应的数据更新操作。以下是两个示例说明：

示例一：使用拖拽元素的位置信息来进行更新操作

在这个示例中，我们需要将拖拽元素的位置信息应用到数据中。具体步骤如下：

$("#sortable").on("sortupdate", function(event, ui) {
  const $items = $(this).children(); // 获取所有子元素
  const data = [];

  for (let i = 0; i < $items.length; i++) {
    const $item = $($items[i]);

    // 将位置信息更新到数据中
    data.push({
      text: $item.text(),
      left: $item.position().left,
      top: $item.position().top
    })
  }

  // 这里可以将更新后的数据进行保存操作
})

示例二：使用数据进行更新操作后重新渲染元素

在这个示例中，我们需要将数据保存到服务端，然后更新 DOM 元素。具体步骤如下：

$("#sortable").on("sortupdate", function(event, ui) {
  const $items = $(this).children(); // 获取所有子元素
  const data = [];

  for (let i = 0; i < $items.length; i++) {
    const $item = $($items[i]);

    // 将位置信息更新到数据中
    data.push({
      text: $item.text(),
      left: $item.position().left,
      top: $item.position().top
    })
  }

  // Ajax 请求将数据保存到服务端
  $.post("/save_data", {data: JSON.stringify(data)}, function(response) {
    // 这里可以处理数据保存成功后的逻辑

    // 重新渲染元素
    $(this).children().remove(); // 删除所有子元素
    for (let i = 0; i < data.length; i++) {
      const item = data[i];

      // 根据数据项创建 DOM 元素，并添加到父元素中
      $("<div>").text(item.text).css({left: item.left, top: item.top}).appendTo($(this));
    }
  });
})

综上所述，通过以上步骤，我们可以在 jqxSortable 拖拽排序过程中，使用 "sortupdate" 事件对数据进行更新和保存。