jQuery UI Sortable插件实现实现拖拽调整列顺序的功能，还可以完成列宽度的调整、排序调整完后存入缓存请给出完整代码

好的，我可以为您提供一个完整的示例代码，实现拖拽调整列顺序、列宽度的功能，并将调整后的顺序和宽度存入缓存中。请参考下面的代码：

HTML代码：

<table id="table">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
      <th>列4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1-1</td>
      <td>1-2</td>
      <td>1-3</td>
      <td>1-4</td>
    </tr>
    <tr>
      <td>2-1</td>
      <td>2-2</td>
      <td>2-3</td>
      <td>2-4</td>
    </tr>
    <tr>
      <td>3-1</td>
      <td>3-2</td>
      <td>3-3</td>
      <td>3-4</td>
    </tr>
  </tbody>
</table>

JavaScript代码：

$(function() {
  // 初始化表格列的顺序和宽度
  var columns = {
    '列1': { order: 1, width: 100 },
    '列2': { order: 2, width: 100 },
    '列3': { order: 3, width: 100 },
    '列4': { order: 4, width: 100 }
  };
  
  // 初始化表格
  $('#table').DataTable({
    // 隐藏默认的排序按钮
    ordering: false,
    // 设置默认列宽
    columnDefs: [
      { targets: '_all', width: columns['列1'].width }
    ]
  });
  
  // 初始化可拖拽排序
  $('#table thead tr').sortable({
    axis: 'x',
    cursor: 'move',
    items: 'th:not(:first-child)',
    start: function(e, ui) {
      // 保存开始拖拽时的位置
      ui.item.startPos = ui.item.index();
    },
    stop: function(e, ui) {
      // 保存调整后的位置
      var oldPos = ui.item.startPos;
      var newPos = ui.item.index();
      // 更改列的顺序
      if (oldPos != newPos) {
        var columnName = ui.item.text();
        var columnOrder = columns[columnName].order;
        for (var i = 0; i < $('#table th').length; i++) {
          if (i == oldPos) {
            columns[columnName].order = newPos + 1;
          } else if (i > oldPos && i <= newPos) {
            var prevColumnName = $('#table th').eq(i - 1).text();
            columns[prevColumnName].order = columns[prevColumnName].order + 1;
          } else if (i < oldPos && i >= newPos) {
            var nextColumnName = $('#table th').eq(i + 1).text();
            columns[nextColumnName].order = columns[nextColumnName].order - 1;
          }
        }
      }
    }
  });
  
  // 初始化可调整宽度
  $('#table th:not(:first-child)').resizable({
    handles: 'e',
    minWidth: 50,
    stop: function(e, ui) {
      // 保存调整后的宽度
      var columnName = ui.element.text();
      var columnWidth = ui.size.width;
      columns[columnName].width = columnWidth;
    }
  });
  
  // 将列的顺序和宽度保存到缓存中
  function saveColumnsToCache() {
    localStorage.setItem('columns', JSON.stringify(columns));
  }
  
  // 页面卸载时保存列的顺序和宽度
  $(window).unload(function() {
    saveColumnsToCache();
  });
  
  // 从缓存中读取列的顺序和宽度
  function loadColumnsFromCache() {
    var cachedColumns = localStorage.getItem('columns');
    if (cachedColumns) {
      columns = JSON.parse(cachedColumns);
    }
  }
  
  // 页面加载时读取列的顺序和宽度
  loadColumnsFromCache();
  
  // 调整列的顺序和宽度
  for (var columnName in columns) {
    var columnOrder = columns[columnName].order;
    var columnWidth = columns[columnName].width;
    var columnIndex = columnOrder - 1;
    $('#table th').eq(columnIndex).text(columnName);
    $('#table th').eq(columnIndex).css('width', columnWidth + 'px');
    $('#table td').each(function() {
      var $td = $(this);
      var $newTd = $('<td>').css('width', columnWidth + 'px');
      var tdText = $td.parent().find('td').eq(columnIndex).text();
      $newTd.text(tdText);
      $td.replaceWith($newTd);
    });
  }
  
  // 保存列的顺序和宽度到缓存中
  saveColumnsToCache();
});

上面的代码使用了jQuery UI Sortable插件和jQuery UI Resizable插件，可以实现拖拽调整列顺序、列宽度的功能，并将调整后的顺序和宽度存入缓存中。请注意，此代码示例使用的是DataTables插件来初始化表格，如果您使用的是其他表格插件，可能需要进行相应的修改。