</div>

}

}

document.onmouseup = function (evt) {

mounted () {

拖动效果的实现基本都是dom操作来实现的，通过拖动分隔线，计算分隔线与浏览器边框的距离(left)，来实现拖动之后的不同宽度的计算；当拖动分隔线1时，计算元素框left和mid；当拖动分隔线2时，计算元素框mid和right；同时设置元素框最小值以防止元素框拖没了（其实是被遮住了）。使用SetCapture() 和 ReleaseCapture()的函数功能指定窗口里设置鼠标捕获。

<ul ref="box">

document.onmouseup = null;

this.dragControllerDiv();

var box = document.getElementsByClassName('box');

</style>  

.left{ width:calc(30% - 10px); height:100%; background:skyblue;

<li ref="mid">备注</li>

document.onmouseup = null;

需求：

mid[j].style.width = (box[i].clientWidth - moveLen - rightW - 10) + 'px';

}

var moveLen = resize[i].left + (endX - startX);

left[j].style.width = moveLen + 'px';

methods: {

js部分代码：

}

resize[i].onmousedown = function (e) {

if (moveLen < 150) moveLen = 150;

for (let i = 0; i < resize.length; i++) {

}

}

<li ref="left">西瓜</li>

var startX = e.clientX;

<li ref="resize"></li>

padding:0;

}

if (moveLen > maxT - leftW - 150) moveLen = maxT - leftW - 150;

resize2[i].style.left = moveLen;

<li ref="mid">备注2</li>

document.onmousemove = null;

</script>  

<li ref="right">test</li>

var endX = e.clientX;

var rightW = right[i].offsetWidth;

if (moveLen < 150) moveLen = 150;

resize2[i].releaseCapture && resize2[i].releaseCapture();

resize[i].style.left = moveLen;

var maxT = box[i].clientWidth - resize[i].offsetWidth;

</ul>

var right = document.getElementsByClassName('right');

if (moveLen > maxT - rightW - 150) moveLen = maxT - rightW - 150;

resize2[i].setCapture && resize2[i].setCapture();

resize[i].setCapture && resize[i].setCapture();

return false;

var mid = document.getElementsByClassName('mid');

return false;

float:left;

resize2[i].onmousedown = function (e) {

}

resize[i].releaseCapture && resize[i].releaseCapture();

}

<li ref="left">芒果</li>

}

var resize2 = document.getElementsByClassName('resize2');