1.请问怎么做可以让一个div的宽度变化是从左到右。2，动态拖来，编辑多级表头

Question

就是div的右边宽位置固定，拉动左边框，宽从左边向右缩小例如我有两个div1,div2. div2在div1里面居中。现在我拉动div2的左边框，宽度缩小，是从左到右缩，右边框的位置不变我现在做一个动态拖来，编辑多级表头，请问思路怎么破，或者可以推荐一个动态拖来，编辑多级表头插件，现在这个图片的表格不是用table来做的，用div做出来只是做编辑预览的，有个大概的样子，然后把数据传到后台，按照这个样子渲染

Answer 1

给div设置样式position: absolute;right: 0; 给父元素设置position:relative

Answer 2

首先，每两个 div 中间放一个 div，作为把手（handle），接受鼠标事件。

然后，大概这样（没有查文档，以下代码为伪代码，请自行适配你的基础库）：

handle.addEventListener('mousedown', event => {

  const startX = event.x;

  const leftWidth = left.width;

  const rightWidth = right.width;

  const _onMove = event => {

    left.width = leftWidth + event.x - startX;

    right.width = rightWidth - (event.x - startX);

  };

  const _onRelease = event => {

    window.removeEventListener('mouseup', _onRelease);

    window.removeEventListener('mousemove', _onMove);

  }

  window.addEventListener('mouseup', _onRelease, false); // 注意，这里一定是 window，因为拖动过程中，可能会离开

  window.addEventListener('mousemove', _onMove, false); // handle，为保证事件生效，所以要绑在 window 上

});