js 可拖动div 调整大小
- 原生项目
页面：
<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/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';
}