原生js实现宽度拖拽效果，也是在网站切图前端外包项目中遇到的，关于拖拽改变宽度的插件要就太强大但是累赘，要就是简单但不够用，拖拽效果本身不复杂，只需要核心的几句话代码即可实现，于是决定用js写一个更加与项目契合，说做就做，用了原生js 代表量并不多，附代码：

var hctn = document.getElementById("hContainer");
var leftd = document.getElementById('drag-left');
var vbar = document.getElementById('vDragbar');

const vdrag = (e) => {
console.log(document.body.clientWidth);
//leftd.style.width = (e.pageX - vbar.offsetWidth / 2 - hctn.offsetLeft) + 'px';
var wd = (document.body.clientWidth - vbar.offsetWidth/2 - e.pageX );
if(wd<=40){
hctn.style.width = 40 + 'px';
document.getElementById("content").style.display = 'none';
$('#vClose').addClass('on');

}
else{
hctn.style.width = wd + 'px';
document.getElementById("content").style.display = 'block';
$('#vClose').removeClass('on');
}

}

vbar.addEventListener('mousedown', () => {
document.addEventListener('mousemove', vdrag);
});

vbar.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', vdrag);
});