用户拉伸（用户拉伸盒子变宽）（基于原本可拖拽的盒子）

用户拉伸（用户拉伸盒子变宽）

只拉伸右边，左侧不动（就是盒子拉伸时top,left不动）

基于前两篇，就直接粘贴全部代码

css html没有做改变，可以自己写，也可以去前面看

var box = document.querySelector(".box");
var a = document.querySelector("#a");
// 盒子宽高
var boxHeight = box.offsetHeight,
	boxWidth = box.offsetWidth;
	// 鼠标在盒子上移动时
	a.onmousemove = e => {
	// 盒子到屏幕左边，上边的距离，，和鼠标位置
	let left = getAbsLeft(a), top = getAbsTop(a), x = e.clientX, y = e.clientY;
	//  右下角拉伸
	if(width + left - x < 9 && height + top - y < 9 ){
		a.style.cursor = "se-resize";
		this.onmousedown = function(e) {
			lashen(e,left,top)
		};
	}
	// 右侧拉伸
	else if (width + left - x < 9 ) {
	a.style.cursor = "e-resize";
	this.onmousedown = function(e) {
		you(e,left)
		};
	} 
	// 下侧拉伸
	else if(height + top - y < 9 ){
		a.style.cursor = "s-resize";
		this.onmousedown = function(e) {
			xia(e,top)
		};
	}
	// 拖拽
	else{
		a.style.cursor = "move"
		this.onmousedown =function(e) {
			tuozhuai(e)
		};
	}
	}
		
		//  获取盒子到屏幕左方的距离
		function   getAbsLeft(obj){
		var   l=obj.offsetLeft; 
		while(obj.offsetParent != null){
		            obj = obj.offsetParent;   
		l += obj.offsetLeft;   
		      }
		return l;
		} 
		
		// 获取盒子到屏幕上方的距离
		function   getAbsTop(obj){
		var   top=obj.offsetTop; 
		while(obj.offsetParent != null){
		            obj = obj.offsetParent;   
		top += obj.offsetTop;   
		      }
		return top;
		}
		
		// 向右拉伸
		function you(e,left) {
			var width = a.offsetWidth;
			var nowX = e.clientX;
			document.onmousemove = function (e) {
				e = e || window.event;
				var aa = width + e.clientX - nowX;
				aa = aa + left > boxWidth?boxWidth - left:aa;
				a.style.width = aa + "px"
			}
		}
		// 像下拉伸
		function xia(e,top) {
			var height = a.offsetHeight;
			var nowY = e.clientY;
			document.onmousemove = function (e) {
				e = e || window.event;
				var bb = height + e.clientY - nowY;
				bb = bb + top > boxHeight?boxHeight - top:bb;
				a.style.height = bb + "px";
			}
		}

		// 右下角拉伸
		function lashen(e,left,top) {
			var width = a.offsetWidth;
			var height = a.offsetHeight;
			var nowX = e.clientX;
			var nowY = e.clientY;
			document.onmousemove = function (e) {
				e = e || window.event;
				var aa = width + e.clientX - nowX;
				var bb = height + e.clientY - nowY;
				aa = aa + left > boxWidth?boxWidth - left:aa;
				bb = bb + top > boxHeight?boxHeight - top:bb;
				a.style.width = aa + "px"
				a.style.height = bb + "px";
			}
		}
		
		// 拖拽事件
		function tuozhuai(e){
			// 盒子到父级的距离
			let left = a.offsetLeft, top = a.offsetTop;
			// 获取盒子宽
			var width = a.offsetWidth;
			var height = a.offsetHeight;
			    //获取x坐标和y坐标
			    var nowX = e.clientX;
			    var nowY = e.clientY;
			document.onmousemove = function(e) {
			    // 需要移动的 x y
			    var nx = e.clientX - nowX;
			    var ny = e.clientY - nowY;
			    //计算移动后的左偏移量和顶部的偏移量
			    var nl = left + nx;
			    var nt = top + ny;
				// 判断出界
				nl = nl + width > boxWidth?boxWidth - width:nl;
				nl = nl < 0 ?0:nl;
				nt = nt + height > boxHeight?boxHeight - height:nt;
				nt = nt < 0 ?0:nt;
				// 设置盒子left top
			    a.style.left = nl + 'px';
			    a.style.top = nt + 'px';
			}
		}
		
		
		document.onmouseup = function () {
			document.onmousemove = null;
		}