盒子拖拽拉伸（和窗口一样的功能）

盒子拖拽拉伸（和窗口一样的功能）

前面已经写了，这里只是整理了一下代码，就直接粘贴代码了

我的完整文件已经上传。感兴趣可以直接下载来看。和这个代码是一样的
地址也放在这里了直接查看代码

若只想要拖拽事件，只需要将函数中的tuozhuai（）取出。
若只想要拉伸，将direction == "no"时的鼠标按下事件改为null即可

实现功能的函数

			// 第一个参数是要改变的盒子，第二个参数是限制他的盒子 
			// 要改变的盒子要有定位
			function change(a,box,minwidth,minheight){
				// 盒子宽高
				var boxHeight = box.offsetHeight,
					boxWidth = box.offsetWidth;
				// 鼠标在盒子上移动时
				a.onmousemove = e => {
					// 盒子到屏幕左边，上边的距离，，和鼠标位置
					let left = getAbsLeft(a),
						top = getAbsTop(a),
						x = e.clientX,
						y = e.clientY,
						width = a.offsetWidth,
						height = a.offsetHeight;
					//  右下角拉伸
					if (width + left - x < 9 && height + top - y < 9) {
						down("se-resize", "youxia")
					}
					// 右上拉伸
					else if (width + left - x < 9 && y - top < 9) {
						down("ne-resize", "youshang");
					}
					// 左下拉伸
					else if (x - left < 9 && height + top - y < 9) {
						down("ne-resize", "zuoxia");
					}
					// 左上
					else if (x - left < 9 && y - top < 9) {
						down("se-resize", "zuoshang");
					}
					// 右侧拉伸
					else if (width + left - x < 9) {
						down("e-resize", "you");
					}
					// 下侧拉伸
					else if (height + top - y < 9) {
						down("s-resize", "xia");
					}
					// 左侧拉伸
					else if (x - left < 9) {
						down("e-resize", "zuo");
					}
					// 向上拉伸
					else if (y - top < 9) {
						down("s-resize", "shang");
					}
					// 拖拽
					else {
						down("move", "no");
					}
				}
				
				// 鼠标样式，及按下事件
				function down(cursor, direction) {
					a.style.cursor = cursor;
					if (direction == "no") {
						this.onmousedown = function(e) {
							tuozhuai(e)
						};
					} else {
						this.onmousedown = function(e) {
							lashen(e,direction);
						};
					}
				}
				
				//  获取盒子到屏幕左方的距离
				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, top, width, height, nowX, nowY) {
					var aa = width + e.clientX - nowX;
					aa = aa + left > boxWidth ? boxWidth - left : aa;
					// 宽的最小
					aa = aa < minwidth ? minwidth : aa;
					a.style.width = aa + "px";
				}
				
				// 下
				function xia(e, left, top, width, height, nowX, nowY) {
					var bb = height + e.clientY - nowY;
					bb = bb + top > boxHeight ? boxHeight - top : bb;
					// 高的最小
					bb = bb < minheight ? minheight : bb;
					a.style.height = bb + "px";
				}
				
				// 上
				function shang(e, left, top, width, height, nowX, nowY) {
					var t = top - (nowY - e.clientY);
					// 不能让方块往另外一边跑
					t = t > top + height - minheight ? top + height - minheight : t;
					t = t < 0 ? 0 : t;
					var bb = height + top - t;
					// 高的最小
					bb = bb < minheight ? minheight : bb;
					a.style.height = bb + "px";
					a.style.top = t + "px";
				}
				
				// 左
				function zuo(e, left, top, width, height, nowX, nowY) {
					var l = left - (nowX - e.clientX);
					// 不能让方块往另外一边跑
					l = l > left + width - minwidth ? left + width - minwidth : l;
					l = l < 0 ? 0 : l;
					var aa = width + left - l;
					// 宽的最小
					aa = aa < minwidth ? minwidth : aa;
					a.style.width = aa + "px";
					a.style.left = l + "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';
					}
				}
				
				//拉伸事件
				function lashen(e,direction){
					var left = a.offsetLeft;
					var top = a.offsetTop;
					var width = a.offsetWidth;
					var height = a.offsetHeight;
					var nowX = e.clientX;
					var nowY = e.clientY;
					document.onmousemove = function(e) {
						e = e || window.event;
						if (direction == "shang") {
							shang(e, left, top, width, height, nowX, nowY);
						} else if(direction == "xia"){
							xia(e, left, top, width, height, nowX, nowY);
						}else if(direction == "zuo"){
							zuo(e, left, top, width, height, nowX, nowY);
						}else if(direction == "you"){
							you(e, left, top, width, height, nowX, nowY);
						}else if (direction == "youxia") {
							xia(e, left, top, width, height, nowX, nowY);
							you(e, left, top, width, height, nowX, nowY);
						}else if (direction == "youshang") {
							shang(e, left, top, width, height, nowX, nowY);
							you(e, left, top, width, height, nowX, nowY);
						}else if (direction == "zuoxia") {
							xia(e, left, top, width, height, nowX, nowY);
							zuo(e, left, top, width, height, nowX, nowY);
						}else if (direction == "zuoshang") {
							zuo(e, left, top, width, height, nowX, nowY);											
							shang(e, left, top, width, height, nowX, nowY);
						}
					}
				}
				
				document.onmouseup = function() {
					document.onmousemove = null;
				}
			}

调用与准备

var box = document.querySelector(".box");
var a = document.querySelector("#a");
change(a,box,100,100);

我的html和css3,

<div class="box">
	<div id="a"></div>
</div>

			* {
				margin: 0;
				padding: 0;
			}

			.box {
				position: relative;
				left: 100px;
				top: 20px;
				width: 900px;
				height: 900px;
				border: 1px solid brown;
				box-sizing: border-box;
			}

			#a {
				width: 300px;
				height: 300px;
				background-color: #7FFFD4;
				position: absolute;
				left: 300px;
				top: 300px;
			}

感觉我的封装还存在问题，代码不够简洁，忘大家也可以指点一二