js 可拖动div 调整大小

1. 原生项目

页面：
<div id="html5" style="display:none;text-align: center;">
    <div class="container">
        <div class="container-mask"></div>
		<div class="resize-bar n-resize"  onmousedown="windowResize(event,'n')"></div>
        <div class="resize-bar w-resize"  onmousedown="windowResize(event,'w')">
            <i class="cctv-icon-resizeBar"></i>
        </div>
        <div class="resize-bar s-resize"  onmousedown="windowResize(event,'s')">
            <i class="cctv-icon-resizeBar"></i>
        </div>
        <div class="resize-bar e-resize"  onmousedown="windowResize(event,'e')">
            <i class="cctv-icon-resizeBar"></i>
        </div>
        <div class="resize-bar nw-resize" onmousedown="windowResize(event,'nw')"></div>
        <div class="resize-bar sw-resize" onmousedown="windowResize(event,'sw')">
            <i class="cctv-icon-resizeCorner"></i>
        </div>
        <div class="resize-bar se-resize" onmousedown="windowResize(event,'se')">
            <i class="cctv-icon-resizeCorner"></i>
        </div>
        <div class="resize-bar ne-resize" onmousedown="windowResize(event,'ne')"></div>
        <iframe id="show2" src="http://10.52.29.23:8080/cboxoms/resource/appPageEditor/index.html?id=47/#/detail/<s:property value='tabVideo.videoId' />" width="100%" height="100%" frameborder="0" scrolling="yes"></iframe>
    </div>
</div>

css:
.container-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .container {
    position: relative;
    width: 750px;
    height: 1000px;
  }

  .resize-bar {position:absolute;display:none;}
  .container:hover .resize-bar{
    display: block;
  }
  .n-resize {top:-1px;left:1px;right:1px;height:15px;cursor:ns-resize;background-color: #eee}
  .w-resize {top:1px;bottom:1px;left:-1px;width:15px;cursor:ew-resize;background-color: #eee}
  .s-resize {bottom:-1px;left:1px;right:1px;height:15px;cursor:ns-resize;background-color: #eee}
  .e-resize {top:1px;bottom:1px;right:-1px;width:15px;cursor:ew-resize;background-color: #eee}
  .nw-resize {top:-1px;left:-1px;width:15px;height:15px;cursor:nwse-resize;background-color: #eee}
  .sw-resize {bottom:-1px;left:-1px;width:15px;height:15px;cursor:nesw-resize;background-color: #eee}
  .se-resize {bottom:-1px;right:-1px;width:15px;height:15px;cursor:nwse-resize;background-color: #eee}
  .ne-resize {top:-1px;right:-1px;width:15px;height:15px;cursor:nesw-resize;background-color: #eee}
  .cctv-icon-resizeBar,.cctv-icon-resizeCorner {
    color: #ccc;
    font-size: 20px;
  }
  .e-resize .cctv-icon-resizeBar,.w-resize .cctv-icon-resizeBar {
    position: relative;
    top: 40%;
    left: -5px;
    transform: rotate(90deg);
  }
  .s-resize .cctv-icon-resizeBar {
    position: relative;
    top: -2px;
  }
  .se-resize .cctv-icon-resizeCorner {
    position: absolute;
    top:-10px;
    left: -10px;
  }
  .sw-resize .cctv-icon-resizeCorner {
    position: absolute;
    top:-7px;
    left: 0px;
  }
  .sw-resize .cctv-icon-resizeCorner {
    transform: rotate(90deg);
  }

js:
function windowResize(event,dragFlag) {
        var minHeight=150
        var minWidth=300
        $('.container-mask').show()
        var div1 = document.querySelector('.container');
        var originX = event.clientX;
        var originY = event.clientY;
        var originWidth = div1.offsetWidth;
        var originHeight = div1.offsetHeight;
        var distanceX = event.clientX - div1.offsetLeft;
        var distanceY = event.clientY - div1.offsetTop;
        if (dragFlag === 'n' || dragFlag === 's') {
            div1.style.cursor = 'ns-resize';
        } else if (dragFlag === 'w' || dragFlag === 'e') {
            div1.style.cursor = 'ew-resize';
        } else if (dragFlag === 'nw' || dragFlag === 'se') {
            div1.style.cursor = 'nwse-resize';
        } else if (dragFlag === 'sw' || dragFlag === 'ne') {
            div1.style.cursor = 'nesw-resize';
        }
        document.onmousemove = function (ev) {
            var oevent = ev || event;
            var changeW = oevent.clientX - originX;
            var changeH = oevent.clientY - originY;
            if (dragFlag.indexOf('n') !== -1) {
                if (oevent.clientY - distanceY >= 0) {
                    if ((originHeight - changeH) >= minHeight) {
                        div1.style.height = originHeight - changeH + 'px';
                        // div1.style.top = oevent.clientY - distanceY + 'px';
                    } else {
                        div1.style.height = minHeight + 'px';
                    }
                }
            } else if (dragFlag.indexOf('s') !== -1) {
                if ((originHeight + changeH) >= minHeight) {
                    div1.style.height = originHeight + changeH + 'px';
                } else {
                    div1.style.height = minHeight + 'px';
                }
            }
            if (dragFlag.indexOf('w') !== -1) {
                if (oevent.clientX - distanceX >= 0) {
                    if ((originWidth - changeW) >= minWidth) {
                        div1.style.width = originWidth - changeW*2 + 'px';
                        // div1.style.left = oevent.clientX - distanceX + 'px';
                    } else {
                        div1.style.width = minWidth + 'px';
                    }
                }
            } else if (dragFlag.indexOf('e') !== -1) {
                if ((originWidth + changeW) >= minWidth) {
                    div1.style.width = originWidth + changeW*2 + 'px';
                } else {
                    div1.style.width = minWidth + 'px';
                }
            }
        }
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
            div1.style.cursor = 'default';
            $('.container-mask').hide()
        }
    };

2.vue项目：

template:
<div class="resize-bar n-resize" @mousedown="windowResize('n')"></div>
<div class="resize-bar w-resize" @mousedown="windowResize('w')"></div>
<div class="resize-bar s-resize" @mousedown="windowResize('s')"></div>
<div class="resize-bar e-resize" @mousedown="windowResize('e')"></div>
<div class="resize-bar nw-resize" @mousedown="windowResize('nw')"></div>
<div class="resize-bar sw-resize" @mousedown="windowResize('sw')"></div>
<div class="resize-bar se-resize" @mousedown="windowResize('se')"></div>
<div class="resize-bar ne-resize" @mousedown="windowResize('ne')"></div>

css:
.resize-bar {position:absolute;}
.n-resize {top:-1px;left:1px;right:1px;height:5px;cursor:ns-resize;}
.w-resize {top:1px;bottom:1px;left:-1px;width:5px;cursor:ew-resize;}
.s-resize {bottom:-1px;left:1px;right:1px;height:5px;cursor:ns-resize;}
.e-resize {top:1px;bottom:1px;right:-1px;width:5px;cursor:ew-resize;}
.nw-resize {top:-1px;left:-1px;width:5px;height:5px;cursor:nwse-resize;}
.sw-resize {bottom:-1px;left:-1px;width:5px;height:5px;cursor:nesw-resize;}
.se-resize {bottom:-1px;right:-1px;width:5px;height:5px;cursor:nwse-resize;}
.ne-resize {top:-1px;right:-1px;width:5px;height:5px;cursor:nesw-resize;}

js:
windowResize(dragFlag){
  this.selectElement = document.getElementById(this.id);
  let _this=this;
  let div1 = this.selectElement;
  let originX = event.clientX;
  let originY = event.clientY;
  let originWidth = this.selectElement.offsetWidth;
  let originHeight = this.selectElement.offsetHeight;
  let distanceX = event.clientX - this.selectElement.offsetLeft;
  let distanceY = event.clientY - this.selectElement.offsetTop;
  if(dragFlag==='n'||dragFlag==='s'){
    div1.style.cursor = 'ns-resize';
  }else if(dragFlag==='w'||dragFlag==='e'){
    div1.style.cursor = 'ew-resize';
  }else if(dragFlag==='nw'||dragFlag==='se'){
    div1.style.cursor = 'nwse-resize';
  }else if(dragFlag==='sw'||dragFlag==='ne'){
    div1.style.cursor = 'nesw-resize';
  }
  document.onmousemove = function (ev) {
    let oevent = ev || event;
    let changeW=oevent.clientX - originX;
    let changeH=oevent.clientY - originY;
    if(dragFlag.indexOf('n')!==-1){
      if(oevent.clientY - distanceY>=0){
        if((originHeight-changeH)>=_this.minHeight){
          div1.style.height=originHeight-changeH+'px';
          div1.style.top = oevent.clientY - distanceY + 'px';
        }else{
          div1.style.height=_this.minHeight+'px';
        }
      }
    }else if(dragFlag.indexOf('s')!==-1){
      if((originHeight+changeH)>=_this.minHeight){
        div1.style.height=originHeight+changeH+'px';
      }else{
        div1.style.height=_this.minHeight+'px';
      }
    }
    if(dragFlag.indexOf('w')!==-1){
      if(oevent.clientX - distanceX>=0){
        if((originWidth-changeW)>=_this.minWidth){
          div1.style.width=originWidth-changeW+'px';
          div1.style.left = oevent.clientX - distanceX + 'px';
        }else{
          div1.style.width=_this.minWidth+'px';
        }
      }
    }else if(dragFlag.indexOf('e')!==-1){
      if((originWidth+changeW)>=_this.minWidth){
        div1.style.width=originWidth+changeW+'px';
      }else{
        div1.style.width=_this.minWidth+'px';
      }
    }
  };
	document.onmouseup = function () {
	    document.onmousemove = null;
	    document.onmouseup = null;
	    div1.style.cursor = 'default';
  }