div大小拖动调节及鼠标样式修改

需要用到鼠标的三个事件  鼠标按下  鼠标移动  鼠标松开。

css代码：

<style>
			body,
			html {
				width: 100%;
				height: 100%;
				margin: 10;
			}

			#drag {
				width: 200px;
				height: 200px;
				padding: 15px;
				position: absolute;
				left: 100px;
				top: 100px;
				border: #00cdcd 2px solid;
				box-sizing: border-box;
			}
		</style>

HTML：

<div id="drag"></div>

JS：

		<script>
			let c = document.getElementById('drag')//需要调整尺寸的div
			
			document.getElementById('body').addEventListener('mousemove', move)// body监听移动事件
			
			c.addEventListener('mousedown', down)// 鼠标按下事件
			
			document.getElementById('body').addEventListener('mouseup', up)// 鼠标松开事件

			let issize = false// 是否开启尺寸修改
		
			let cX, cY	// 鼠标按下时的坐标，并在修改尺寸时保存上一个鼠标的位置
			
			let minW = 8,
				minH = 8// div可修改的最小宽高
			
			let dir = ''// 鼠标按下时的位置，使用n、s、w、e表示

			function up() {// 鼠标松开时结束尺寸修改
				issize = false
			}
			
			function down(e) {// 鼠标按下时开启尺寸修改
				let d = getDir(e)
				// 当位置为四个边和四个角时才开启尺寸修改
				if (d !== '') {
					issize = true
					dir = d
					cX = e.clientX
					cY = e.clientY
				}
			}
			
			function move(e) {// 鼠标移动事件
				let d = getDir(e)
				let cursor
				if (d === '') cursor = 'default';
				else cursor = d + '-resize';
				// 修改鼠标显示效果
				c.style.cursor = cursor;
				// 当开启尺寸修改时，鼠标移动会修改div尺寸
				if (issize) {
					// 鼠标按下的位置在右边，修改宽度
					if (dir.indexOf('e') !== -1) {
						c.style.width = Math.max(minW, c.offsetWidth + (e.clientX - cX)) + 'px'
						cX = e.clientX
					}
					// 鼠标按下的位置在上部，修改高度
					if (dir.indexOf('n') !== -1) {
						c.style.height = Math.max(minH, c.offsetHeight + (cY - e.clientY)) + 'px'
						cY = e.clientY
					}
					// 鼠标按下的位置在底部，修改高度
					if (dir.indexOf('s') !== -1) {
						c.style.height = Math.max(minH, c.offsetHeight + (e.clientY - cY)) + 'px'
						cY = e.clientY
					}
					// 鼠标按下的位置在左边，修改宽度
					if (dir.indexOf('w') !== -1) {
						c.style.width = Math.max(minW, c.offsetWidth + (cX - e.clientX)) + 'px'
						cX = e.clientX
					}
				}
			}
			
			// 获取鼠标所在div的位置
			function getDir(ev) {
				let x, y, o, d;
				d = '';

				x = ev.offsetX;
				y = ev.offsetY;
				o = 10;

				if (y < o) d += 'n';
				else if (y > c.offsetHeight - o) d += 's';
				if (x < o) d += 'w';
				else if (x > c.offsetWidth - o) d += 'e';

				return d;
			}
		</script>

以上代码可以复制试试效果