原生js实现拖拽、缩放功能
效果如下图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/de83bde0e93687003a2e56dc018d8375.gif)
代码实现
<div id="box">
<img class="bgimage" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile02.16sucai.com%2Fd%2Ffile%2F2014%2F0829%2Fb871e1addf5f8e96f3b390ece2b2da0d.jpg&refer=http%3A%2F%2Ffile02.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640442357&t=1d3d0789798992a3fa3371ba3d293057" alt="">
<div id="container"></div>
</div>
#box {
width: 500px;
height: 372px;
border: 1px solid #000;
margin: 10px auto;
position: relative;
}
.bgimage {
width: 500px;
height: 372px;
}
.handle {
position: absolute;
width: 10px;
height: 10px;
border: 1px solid #fff;
box-sizing: border-box;
}
#container {
width: 100%;
height: 372px;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
var box = document.getElementsByClassName('bgimage')[0];
var container = document.getElementById('container');
var boxOffsetLeft = document.getElementById('box').offsetLeft;
var boxOffsetTop = document.getElementById('box').offsetTop;
var boxW = box.width;
var boxH = box.height;
var div = document.createElement('div');
div.setAttribute('style', 'min-width: 30px;min-height: 20px;width:60px;height:40px;border: 2px solid red;position: absolute;top: 20px;left: 20px;box-sizing:border-box;cursor:move;z-index: 2');
div.classList.add('resize-box');
document.getElementById('container').appendChild(div);
var spanNw = document.createElement('span');
spanNw.classList.add('handle-nw', 'handle');
spanNw.setAttribute('style', 'cursor: nw-resize; top: -10px;left: -10px;');
div.appendChild(spanNw);
var spanNe = document.createElement('span');
spanNe.classList.add('handle-ne', 'handle');
spanNe.setAttribute('style', 'cursor: ne-resize; top: -10px;right: -10px');
div.appendChild(spanNe);
var spanSe = document.createElement('span');
spanSe.classList.add('handle-se', 'handle');
spanSe.setAttribute('style', 'cursor: se-resize;bottom: -10px;right: -10px;');
div.appendChild(spanSe);
var spanSw = document.createElement('span');
spanSw.classList.add('handle-sw', 'handle');
spanSw.setAttribute('style', 'cursor: sw-resize;bottom: -10px;left: -10px');
div.appendChild(spanSw);
div.onmousedown = function(e) {
var ev = e || window.event;
ev.preventDefault();
var mouseX = ev.pageX;
var mouseY = ev.pageY;
var divMouseX = mouseX - box.offsetLeft - div.offsetLeft;
var divMouseY = mouseY - box.offsetTop - div.offsetTop;
this.onmousemove = function(e) {
var evn = e || window.event;
evn.preventDefault();
var resizeBoxW = div.style.width.split('p')[0];
var resizeBoxH = div.style.height.split('p')[0];
var moveX = evn.pageX;
var moveY = evn.pageY;
var mousemoveX = moveX- box.offsetLeft - divMouseX;
var mousemoveY = moveY- box.offsetTop - divMouseY;
if (mousemoveX <= 0) {
mousemoveX = 0;
}
if (mousemoveX >= boxW - resizeBoxW) {
mousemoveX = boxW - resizeBoxW;
}
if (mousemoveY <= 0) {
mousemoveY = 0;
}
if (mousemoveY >= boxH - resizeBoxH) {
mousemoveY = boxH - resizeBoxH;
}
div.style.left = mousemoveX + 'px';
div.style.top = mousemoveY + 'px';
}
this.onmouseleave = function(e) {
e.preventDefault();
div.onmousemove = null;
div.onmouseup = null;
}
this.onmouseup = function(e) {
e.preventDefault();
div.onmousemove = null;
div.onmouseup = null;
}
}
var handle = document.getElementsByClassName('handle');
spanNw.onmousedown = function(e) {
var nw = e || window.event;
nw.stopPropagation();
var nwMouseX = nw.pageX;
var nwMouseY = nw.pageY;
var divOffsetLeft = div.offsetLeft;
var divOffsetTop = div.offsetTop;
var divW = div.style.width.split('p')[0] - 0;
var divH = div.style.height.split('p')[0] - 0;
this.onmousemove = function(e) {
var nwe = e || window.event;
nwe.preventDefault();
var nweMouseX = nwe.pageX;
var nweMouseY = nwe.pageY;
var nwMoveX = nweMouseX - nwMouseX;
var nwMoveY = nweMouseY - nwMouseY;
if (divOffsetLeft + nwMoveX >= 0) {
div.style.width = divW - nwMoveX + 'px';
div.style.left = divOffsetLeft + nwMoveX + 'px';
}
if (divOffsetTop + nwMoveY >= 0) {
div.style.height = divH - nwMoveY + 'px';
div.style.top = divOffsetTop + nwMoveY + 'px';
}
}
this.onmouseleave = function(e) {
spanNw.onmousemove = null;
spanNw.onmouseup = null;
div.onmousemove = null;
div.onmouseup = null;
}
this.onmouseup = function(e) {
e.preventDefault();
spanNw.onmousemove = null;
spanNw.onmouseup = null;
div.onmousemove = null;
div.onmouseup = null;
}
}
spanNe.onmousedown = function(e) {
var ne = e || window.event;
ne.stopPropagation();
var neMouseX = ne.pageX;
var neMouseY = ne.pageY;
var divOffsetTop = div.offsetTop;
var divW = div.style.width.split('p')[0] - 0;
var divH = div.style.height.split('p')[0] - 0;
this.onmousemove = function(e) {
var nee = e || window;
nee.preventDefault();
var neeMouseX = nee.pageX;
var neeMouseY = nee.pageY;
var neMoveX = neeMouseX - neMouseX;
var neMoveY = neeMouseY - neMouseY;
if (neeMouseX - boxOffsetLeft - 3 <= boxW) {
div.style.width = divW + neMoveX + 'px';
}
if (divOffsetTop + neMoveY >= 0) {
div.style.height = divH - neMoveY + 'px';
div.style.top = divOffsetTop + neMoveY + 'px';
}
}
this.onmouseleave = function(e) {
spanNe.onmousemove = null;
spanNe.onmouseup = null;
div.onmousemove = null;
div.onmouseup = null;
}
this.onmouseup = function(e) {
e.preventDefault();
spanNe.onmousemove = null;
spanNe.onmouseup = null;
div.onmousemove = null;
div.onmouseup = null;
}
}
spanSe.onmousedown = function(e) {
var se = e || window;
se.stopPropagation();
var seMouseX = se.pageX;
var seMouseY = se.pageY;
var divW = div.style.width.split('p')[0] - 0;
var divH = div.style.height.split('p')[0] - 0;
this.onmousemove = function(e) {
var see = e || window;
var seeMouseX = see.pageX;
var seeMouseY = see.pageY;
var seeMoveX = seeMouseX - seMouseX;
var seeMoveY = seeMouseY - seMouseY;
if (seeMouseX - boxOffsetLeft - 3 <= boxW) {
div.style.width = divW + seeMoveX + 'px';
}
if (seeMouseY - boxOffsetTop - 2 <= boxH) {
div.style.height = divH + seeMoveY + 'px';
}
}
this.onmouseleave = function(e) {
e.preventDefault();
spanSe.onmousemove = null;
spanSe.onmouseup = null;
div.onmousemove = null;
div.onmouseup = null;
}
this.onmouseup = function(e) {
e.preventDefault();
spanSe.onmousemove = null;
spanSe.onmouseup = null;
div.onmousemove = null;
div.onmouseup = null;
}
}
spanSw.onmousedown = function(e) {
var sw = e || window.event;
sw.stopPropagation();
var swMouseX = sw.pageX;
var swMouseY = sw.pageY;
var divOffsetLeft = div.offsetLeft;
var divW = div.style.width.split('p')[0] - 0;
var divH = div.style.height.split('p')[0] - 0;
this.onmousemove = function(e) {
var swe = e || window.event;
swe.preventDefault();
var sweMouseX = swe.pageX;
var sweMouseY = swe.pageY;
var swMoveX = sweMouseX - swMouseX;
var swMoveY = sweMouseY - swMouseY;
if (divOffsetLeft + swMoveX >= 0) {
div.style.left = divOffsetLeft + swMoveX + 'px';
div.style.width = divW - swMoveX + 'px';
}
if (sweMouseY - boxOffsetTop - 2 <= boxH) {
div.style.height = divH + swMoveY + 'px';
}
}
this.onmouseleave = function(e) {
spanSw.onmousemove = null;
spanSw.onmouseup = null;
div.onmousemove = null;
div.onmouseup = null;
}
this.onmouseup = function(e) {
e.preventDefault();
spanSw.onmousemove = null;
spanSw.onmouseup = null;
div.onmousemove = null;
div.onmouseup = null;
}
}