function dragDiv(doucument,className){
var theobject = null; //声明，初始化一个操作对象

function resizeObject() {
 this.el        = null; //要操作的元素
 this.grabx = null;     //一些常用值 元素相对于浏览器窗口的X轴位置
 this.graby = null; //元素相对于浏览器窗口的Y轴位置
 this.width = null; //元素offsetWidth宽度
 this.height = null;    //元素offsetHeight高度
}

function doDown() {
//判断元素是否满足条件，并且返回
 var el = getReal(event.srcElement, "className", class);

//判断元素是否为空
 if (el == null) {
  theobject = null;
  return;
 }  

//构建一个被操作的元素对象
 theobject = new resizeObject();
 theobject.el = el;
 theobject.grabx = window.event.clientX;
 theobject.graby = window.event.clientY;
 theobject.width = el.offsetWidth;
 theobject.left = el.offsetLeft;

 window.event.returnValue = false;//取消事件处理程序中调用函数的默认操作
 window.event.cancelBubble = true;//取消冒泡
}

//把操作的元素置为空
function doUp() {
 if (theobject != null) {
  theobject = null;
 }
}

//
function doMove() {
 var el, xPos, str, xMin;
 xMin = 0; //最小移动宽度x

//判断，且获取要操作的对象
 el = getReal(event.srcElement, "className", class);
//判断上一步操作是否成功
 if (el.className == class说) {


 //设置cursor样式
 str = "pointer";
el.style.cursor = str;
 }

//开始拖拉的位置
 if(theobject != null) {
 theobject.el.style.width = Math.max(xMin, theobject.width +       window.event.clientX - theobject.grabx) + "px";

window.event.returnValue = false;//阻止事件默认
window.event.cancelBubble = true;//阻止事件冒泡
 } 
}

//判断当前的元素是否合格（不为空，不能为body）
//判断当前元素的CSS类名是否为指定类名
function getReal(el, type, value) {
 temp = el;
 while ((temp != null) && (temp.tagName != "BODY")) {
  if (eval("temp." + type) == value) {
 el = temp;
 return el;
}
  temp = temp.parentElement;
 }
 return el;
}

document.onmousedown = doDown;
document.onmouseup   = doUp;
document.onmousemove = doMove;
}

上面部分是ES5的写法，ES6的写法如下所示：

class ChangeVm {
constructor() {
this.elDoc = null
this.elVm = null
this.grabx = null
this.graby = null
this.width = null
this.height = null
this.oriDocWidth = null
this.oriVmWidth = null
}

setUp() { 
document.onmousedown = this.doDown
document.onmouseup = this.doUp
document.onmousemove = this.doMove
} 

doDown() {
const el = event.srcElement.classList.contains('line')?event.srcElement:null
if (el === null) {
  return
}
this.elDoc = el.parentNode
this.elVm = document.querySelector('#app2')
this.grabx = window.event.clientX
this.graby = window.event.clientY
this.width = this.elDoc.offsetWidth
this.left = this.elDoc.offsetLeft

if(!this.oriDocWidth){
this.oriDocWidth=this.width
this.oriVmWidth=this.elVm.offsetWidth
}

window.event.returnValue = false
window.event.cancelBubble = true
}

doUp() {
if (this.elDoc != null) {
  this.elDoc = null
}
}

doMove() {
const xMin = 0

if(this.elDoc != null) {
    if(this.elVm.offsetWidth < 600){
return false
}
  const xMax = (this.width + window.event.clientX) - this.grabx
  const tempWidth = Math.max(xMin, xMax)
  this.elDoc.style.width = `${tempWidth}px`

  this.elVm.style.width=this.oriVmWidth+this.oriDocWidth-tempWidth+'px'
  window.event.returnValue = false
  window.event.cancelBubble = true
}
}
}

const changeVm = new ChangeVm
changeVm.setUp()

相对而言，ES6的写法更加清晰，易读。有收获的小伙伴别忘记点赞哦！