html通过sortable实现table中内容的拖动

HTML结合jQuery UI的Sortable插件可以实现表格内容的拖动功能。首先，你需要在HTML结构中添加table，并为其提供id以便后续引用。然后，在CSS中对表格元素和排序条目进行样式设置，如背景颜色、边框等。

<table id="draggable" class="ui-sortable">
  <tr>
    <td>项目1</td>
    <td>项目2</td>
    <td>项目3</td>
  </tr>
  <!-- ... 其他行 -->
</table>

接下来，在JavaScript部分引入jQuery和Sortable库，然后初始化排序功能：

$(function() {
  $("#draggable").sortable({
    axis: 'y', // 指定横轴或纵轴排序
    placeholder: 'ui-state-highlight', // 拖动时的临时单元格样式
    start: function(event, ui) { // 开始拖动事件处理
      $(ui.item).data('originalPosition', ui.item.position());
    },
    stop: function(event, ui) { // 结束拖动事件处理
      var originalPos = $(ui.item).data('originalPosition');
      // 更新数据库或服务器端数据，根据原始位置和新的位置
    }
  });
});

在这个例子中，`axis: 'y'`表示按列（垂直方向）进行排序。`placeholder`属性用于创建一个拖放区域的视觉效果。`start`和`stop`函数分别处理开始拖动和结束拖动时的操作，例如记录原始位置并在停止时更新实际的位置信息。