javascript - 如何拖放 html 表格列？

Question

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

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

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

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

Answer 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;