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

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

https://img4.mukewang.com/5c9c6dfa00011ed608000157.jpg

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

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

https://img3.mukewang.com/5c9c6dfc0001000008000360.jpg

https://img1.mukewang.com/5c9c6dfd0001635408000158.jpg


HUX布斯
浏览 828回答 3
3回答

SMILET

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

www说

首先,每两个 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 上});
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript