如何拖放 html 表格列？答案

【问题标题】：How do I drag/drop html table columns?如何拖放 html 表格列？
【发布时间】：2019-12-04 13:22:43
【问题描述】：

我有一个 html 表格。我想拖放列，而不是行。我正在使用 vue.js。

拖放行很容易，因为每一行都有自己的父元素，您可以在其中传递draggable="true"。至于列，每个列都包含在它的父行中。所以我无法将原生draggable="true" 传递给表格的整个列。

然后我找到了这个库：https://github.com/kutlugsahin/vue-smooth-dnd，但这并没有给我列拖动选项。

我怎样才能实现我想要的？如果可以使用上面的插件就更好了。

【问题讨论】：

您在哪里可以通过以下答案解决您的问题？
没有。没试过。看起来应该可以了。

标签： javascript vue.js vuejs2 vuetify.js

【解决方案1】：

我正在使用 Element UI 中的表格并编写了一个自定义方法来设置拖放：

initializeDragAndDropFunctionality() {
  const tableColumn = this.$refs.tableRef.$el.querySelector(
    '.el-table__header-wrapper .el-table__header thead tr'
  );
  Sortable.create(tableColumn, {
    draggable: 'th',
    onEnd: this.dragReorderColumn
  });
}

在组件挂载时调用：

  mounted() {
    this.initializeTable();
  },

在表格中你需要为ref设置一个值：

  <el-table
      ref="tableRef"
    >
      <el-table-column
        v-for="(column, index) in tableTitles"
        :label="column.title"
        :prop="column.field"
        :width="column.width"
      >
      </el-table-column>
    </el-table>

组件导入一个使用 Sortablejs 的 util 类：

import Sortable from 'sortablejs';

const vueSortable = {
  ...Sortable,
  create(el, options) {
    function swap(draggableSelector, movedElement, oldIndex, newIndex) {
      const parent = movedElement.parentNode;
      const cells = parent.querySelectorAll(draggableSelector);

      if (oldIndex > newIndex) {
        parent.insertBefore(movedElement, cells[newIndex]);
      } else {
        // inserts after trs[oldIndex] - if nextSibling is null insertBefore puts item to the end
        parent.insertBefore(movedElement, cells[newIndex].nextSibling);
      }
    }

    const tmpStorage = {};

    const newOptions = {
      ...options,
      onEnd(evt) {
        swap(options.draggable, evt.item, evt.newIndex, evt.oldIndex);

        tmpStorage.onChange = undefined;

        if (options.onEnd) {
          try {
            options.onEnd(evt);
          } catch (ex) {
            console.error('Error at onEnd:', ex);
          }
        }
      }
    };

    return Sortable.create(el, newOptions);
  }
};

export default vueSortable;

【讨论】：

嗨@Simon，感谢您的出色回答！我是 Vuejs 的新手，这个答案对我帮助很大。关于util类vueSortable文件，你的意思是不是在组件中导入Sortable库，而是导入util vueSortable文件。能否请您在 github 或 codepen 上提供一个示例？

【解决方案2】：

我还想在表格中拖动一列。我找到了这个解决方案。您需要做的就是重新排序 thead 键，数据将被重新呈现。

<el-table border :data="tableData" size="mini" >
      <el-table-column
        v-for="(item, index) in elTheadList"
        :prop="dataTheadList[index]"
        :label='item'
        :key="`thead_${index}`"
       >
      </el-table-column>
    </el-table>
data() {
    return {
      tableData: [{
        date: '2016-05-01',
        name: 'Cristian Millan',
        address: 'Baja #11'
      },{
        date: '2016-05-02',
        name: 'Jorge Cabrera',
        address: 'Progreso #18'
      },{
        date: '2016-05-03',
        name: 'Armando Mendivil',
        address: 'Novena #12'
      }],
      dataTheadList: [
        'date',
        'name',
        'address'
      ],
      elTheadList: ['Date', 'Name', 'Address'],
    }
  },

mounted() {
   const el = document.querySelector('.el-table__header-wrapper tr')
   this.sortable = Sortable.create(el, {
    animation: 180,
    delay: 0,
    onEnd: evt => {
      const oldItem = this.dataTheadList[evt.oldIndex]
      this.dataTheadList.splice(evt.oldIndex, 1)
      this.dataTheadList.splice(evt.newIndex, 0, oldItem)
    }
  })
  }

【讨论】：