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

Question

就是div的右边宽位置固定，拉动左边框，宽从左边向右缩小

例如我有两个div1,div2. div2在div1里面居中。现在我拉动div2的左边框，宽度缩小，是从左到右缩，右边框的位置不变

我现在做一个动态拖来，编辑多级表头，请问思路怎么破，或者可以推荐一个动态拖来，编辑多级表头插件，现在这个图片的表格不是用table来做的，用div做出来只是做编辑预览的，有个大概的样子，然后把数据传到后台，按照这个样子渲染

Answer 1

你说的这种方式应该是右对齐的方式。
1、设置float:right;自然宽度变化的时候是右边位置不变，左侧延伸了；
2、定位 绝对定位或者固定定位；
3、flex布局，也有右对齐的设置，你可以参考http://www.ruanyifeng.com/blo...

Answer 2

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

Answer 3

首先，每两个 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 上
});

Answer 4

我有个想法，让元素缩小的同时，把元素往相反的方向translate，不知道可不可以