原生js实现拖拽、缩放功能

原生js实现拖拽、缩放功能

效果如下图

代码实现

• html

<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>

• css

#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;
		}

• js

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;
	// 获取鼠标在div中的位置
	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();
		// 获取resize-box宽高
		var resizeBoxW = div.style.width.split('p')[0];
		var resizeBoxH = div.style.height.split('p')[0];
		// 获取鼠标移动的pagex， pageY
		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';
	}
	// 处理拖动过快，move事件没有销毁
	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;
	// // 获取鼠标在span中的位置
	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';
        }
	}
	// 处理拖动过快，move事件没有销毁
	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;
    // 获取div的宽高
    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;
      // box边框1px,div边框2px
      // 防止右侧拖出盒子
      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;
  // 获取div的宽高
  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;
    // box边框1px,div边框2px
    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;
	// // 获取鼠标在span中的位置
	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;
	}
}