如何实现表格的列拖拽的

2021-12-11

# 如何实现表格的列拖拽的

因为使用el-table实现，所以一些抓取dom的class类通过el-table内置的类实现，实际如果是简单表格的话，可以自行增加class来实现

# 底层框架/原理

核心的拖拽原理，我们通过使用sortablejs提供的dom拖拽方案，实现

我们通过让sortablejs的el参数指定到el-table的header上

const query = ".el-table__header-wrapper thead tr"
const el docuemnt.querySelector(query) // this.$el.querySelector(query)

那么表头的那一行的所有th就变为拖拽目标了，之后根据index的顺序变化，可以反推到列的切换上

核心代码

const sortable = new Sortable(el, {
	onEnd(evt) {
		let { newIndex, oldIndex, item } = evt;
		// 通知上级交换column位置
	}
})

# 其他一些实现

# 跨表格实现

跨表格实现思路在于，通过在window上建立一个桥接用的map 缓存table的dom => vue实例对应关系

const sortable = new Sortable(el, {
	onEnd(evt) {
	      const { to, from, pullMode } = evt;
	      const toContext = window.bridge.get(to)
	      const fromContext = window.bridge.get(from)
		let { newIndex, oldIndex, item } = evt;
		// 通知from和to对应的数据进行切换即可
	}
})

# 拖拽优化

虽然核心代码很简单，但是不够完美，拖拽的时候只有表头可以进行拖动，实际上整列是没有跟着一起拖动的

所以我们需要进行样式上的优化，主要有两点

拖拽时候的影子
该列所有td跟随表头拖动

# 拖拽影子优化

影子实际上是可以通过dataTransfer的setDragImage来修改的，参数支持传入一个dom

不过，因为列是好多dom拼起来的，实际上要还原的话，难度很高，于是换了一个思路，通过dom.cloneNode复制了一个table之后，只露出拖拽那一列即可，当然，需要插入到当前页面

所以我们新建一个三层的dom节点, 分别是

容器，用来在页面上放置，同时控制显示区域，通过fixed和z-index 让其不可见
table容器，table的容器，用来还原表格宽度，以及日后样式上的还原
cloneNode

所以我们通过修改setData事件来控制，具体代码如下

        setData(dataTransfer, dragEl) {
            /**
             * 在页面上创建一个当前table的wrapper，然后隐藏它，只显示那一列的部分作为拖拽对象
             * 在下一个事件循环删除dom即可
             */
            const { offsetLeft, offsetWidth, offsetHeight } = dragEl;
            const tableEl = elTableContext.$el;

            const wrapper = document.createElement("div"); // 可视区域
            wrapper.style = `position: fixed; z-index: -1;overflow: hidden; width: ${offsetWidth}px`;
            const tableCloneWrapper = document.createElement("div"); // table容器，宽度和位移
            tableCloneWrapper.style = `position: relative; left: -${offsetLeft}px; width: ${tableEl.offsetWidth}px`;
            wrapper.appendChild(tableCloneWrapper);
            tableCloneWrapper.appendChild(tableEl.cloneNode(true));

            // 推进dom，让dataTransfer可以获取
            document.body.appendChild(wrapper);
            // 拖拽位置需要偏移到对应的列上
            dataTransfer.setDragImage(
              wrapper,
              offsetLeft + offsetWidth / 2,
              offsetHeight / 2
            );
            setTimeout(() => {
              document.body.removeChild(wrapper);
            });
        },

之后拖拽的影子就完全正常了，是当前拖拽的这一列

# 拖拽跟随移动

发现的问题点

拖拽位置需要修正
动画带来的问题

因为实际上dom位置不需要动，这样可以在切换column变换之后让el-table自动重新渲染，所以需要

onMove, 自动对齐位置
onEnd，移除位置切换

实际操作中，最开始是希望将整个操作简化为，onMove的时候，交换th下对应的td

最开始想的匹配规则是根据th当前的index去推测对应的td列表，但是发现，因为onMove的时候会导致index变动，所以查询的列表不对，最后发现每一个td会被el-table加上当前列的列名类似table0-column2，所以只要根据拖拽的th，通过document.querySelectAll查询就可以拿到对应的td了

其次，是 交换需要推导对应位置 ，最开始我尝试使用对应的需要交换的td的当前位置，作为新位置，但是发现，如果增加了动画效果，其实通过getBoundingClientRect拿到的位置是动画中的，如果进行连续拖拽的话，半路中交换的列停留的位置就会出现问题，所以还是得进行修正

以及，计算移动位置需要考虑当前已经移动的位置，才能计算真实的transition

所以我最终选择的解决方案是

onMove的时候触发一个节流的位置匹配函数让th对应的td和th在x轴上对齐
onEnd的时候自动清空位移
拆出计算位置的函数
移动过的td增加class，onEnd的时候根据class自动清空

具体代码-工具函数们

/* eslint-disable no-unused-vars */
import throttle from 'lodash/throttle'
import Sortable from "sortablejs";
const { utils } = Sortable;
const { css } = utils;

/** @type {Set<Element>} */
const animatedSet = new Set();

export const ANIMATED_CSS = "el-table-draggable-animated";
const translateRegexp = /translate\((?<x>.*)px,\s?(?<y>.*)px\)/;
const elTableColumnRegexp = /el-table_\d*_column_\d*/

/**
 * 重设transform
 * @param {Element} el 
 */
function resetTransform(el) {
  css(el, "transform", "");
  css(el, "transitionProperty", "");
  css(el, "transitionDuration", "");
}

/**
 * 获取原始的boundge位置
 * @param {Element} el
 * @param {boolean} ignoreTranslate
 * @returns {{x: number, y: number}}
 */
export function getDomPosition(el, ignoreTranslate = true) {
  const position = el.getBoundingClientRect().toJSON();
  const transform = el.style.transform;
  if (transform && ignoreTranslate) {
    const { groups = { x: 0, y: 0 } } = translateRegexp.exec(transform) || {};
    position.x = position.x - +groups.x;
    position.y = position.y - +groups.y;
  }
  return position;
}

/**
 * 添加动画
 * @param {Element} el
 * @param {string} transform
 * @param {number} animate
 */
export function addAnimate(el, transform, animate = 0) {
  el.classList.add(ANIMATED_CSS);
  css(el, "transitionProperty", `transform`);
  css(el, "transitionDuration", animate + "ms");
  css(el, "transform", transform);
  animatedSet.add(el);
}

/**
 * 清除除了可忽略选项内的动画
 * @param {Element[]|Element} targetList
 */
export function clearAnimate(targetList = []) {
  const list = Array.isArray(targetList) ? targetList : [targetList]
  const removedIteratory = list.length ? list : animatedSet.values()
  for (const el of removedIteratory) {
    el.classList.remove(ANIMATED_CSS);
    resetTransform(el)
    if (animatedSet.has(el)) {
      animatedSet.delete(el);
    }
  }
}

/**
 * 获取移动的animate
 * @param {Element} el
 * @param {{x?: number, y?:number}} target
 * @returns {string}
 */
 export function getTransform(el, target) {
  const currentPostion = getDomPosition(el)
  const originPosition = getDomPosition(el, true)
  const { x, y } = target
  const toPosition = {
    x: x!==undefined ? x : currentPostion.x,
    y: y!==undefined ? y : currentPostion.y
  }
  const transform = `translate(${toPosition.x -
    originPosition.x}px, ${toPosition.y - originPosition.y}px)`
  return transform
}

/**
 * 移动到具体位置
 * @param {Element} el
 * @param {{x?: number, y?:number}} target
 * @returns {string}
 */
export function translateTo(el, target) {
  resetTransform(el)
  const transform = getTransform(el, target)
  el.style.transform = transform
}

/**
 * 交换
 * @param {Element} newNode
 * @param {Element} referenceNode
 * @param {number} animate
 */
export function insertBefore(newNode, referenceNode, animate = 0) {
  /**
   * 动画效果
   * @todo 如果是不同列表，动画方案更新
   */
  if (animate) {
    // 同一列表处理
    if (newNode.parentNode === referenceNode.parentNode) {
      // source
      const offset = newNode.offsetTop - referenceNode.offsetTop;
      if (offset !== 0) {
        const subNodes = Array.from(newNode.parentNode.children);
        const indexOfNewNode = subNodes.indexOf(newNode);
        const indexOfReferenceNode = subNodes.indexOf(referenceNode);
        const nodes = subNodes
          .slice(
            Math.min(indexOfNewNode, indexOfReferenceNode),
            Math.max(indexOfNewNode, indexOfReferenceNode)
          )
          .filter((item) => item !== newNode);
        const newNodeHeight =
          offset > 0 ? -1 * newNode.offsetHeight : newNode.offsetHeight;
        nodes.forEach((node) =>
          addAnimate(node, `translateY(${newNodeHeight}px)`, animate)
        );
        addAnimate(newNode, `translateY(${offset}px)`, animate);
      }
    } else {
      console.log("非同一列表");
    }

    // 清除
    setTimeout(() => {
      clearAnimate();
    }, animate);
  }
  referenceNode.parentNode.insertBefore(newNode, referenceNode);
}

/**
 * 交换
 * @param {Element} newNode
 * @param {Element} referenceNode
 * @param {number} animate
 */
export function insertAfter(newNode, referenceNode, animate = 0) {
  const targetReferenceNode = referenceNode.nextSibling;
  insertBefore(newNode, targetReferenceNode, animate);
}

/**
 * 交换元素位置
 * @todo 优化定时器
 * @param {Element} prevNode
 * @param {Element} nextNode
 * @param {number} animate
 */
export function exchange(prevNode, nextNode, animate = 0) {
  const exchangeList = [
    {
      from: prevNode,
      to: nextNode,
    },
    {
      from: nextNode,
      to: prevNode,
    },
  ];
  exchangeList.forEach(({ from, to }) => {
    const targetPosition = getDomPosition(to, false)
    const transform = getTransform(from, targetPosition);
    addAnimate(from, transform, animate);
  });
}

/**
 * 从th获取对应的td
 * @todo 支持跨表格获取tds
 * @param {Element} th
 * @returns {NodeListOf<Element>}
 */
export function getTdListByTh(th) {
  const className = Array.from(th.classList).find(className => elTableColumnRegexp.test(className))
  return document.querySelectorAll(`.${className}`)
}

/**
 * 自动对齐列
 * @param {Element[]|Element} thList 
 */
export const alignmentTableByThList = throttle(
  function alignmentTableByThList(thList) {
    const list = Array.isArray(thList) ? thList : [thList]
    list.forEach(th => {
      const tdList = getTdListByTh(th)
      tdList.forEach(td => {
        const { x } = getDomPosition(th)
        translateTo(td, { x })
      })
    })
  },
  1000 / 60
)

export default {
  alignmentTableByThList,
  getTransform,
  clearAnimate,
  addAnimate,
  ANIMATED_CSS,
  getTdListByTh,
  translateTo,
  getDomPosition,
  insertAfter,
  insertBefore,
  exchange,
};

拖拽移动自动排序

onMove(evt, originalEvent) {
		const { related, willInsertAfter, dragged } = evt;
		
		// 工具函数，自动对齐之前的列
 		dom.alignmentTableByThList(Array.from(dragged.parentNode.childNodes))
 		
 		// 交换dom位置，动画
            const { animation } = vm._sortable.options;
            // 需要交换两列所有的td
            const thList = [dragged, related];
            const [fromTdList, toTdList] = (willInsertAfter
              ? thList
              : thList.reverse()
            ).map((th) => dom.getTdListByTh(th));

            fromTdList.forEach((fromTd, index) => {
              const toTd = toTdList[index];
              // 交换td位置
              dom.exchange(fromTd, toTd, animation);
            });

当然还有一些可以优化的点，但是目前就是一个比较完善的列拖拽了