console 命令行工具 X clear

console

let containWrap = null,
    startX = 0, startY = 0, endX = 0, endY = 0

function handleMouseDown(event) {
    startX = event.clientX
    startY = event.clientY
    endX = event.clientX
    endY = event.clientY
    document.body.addEventListener('mousemove', handleMouseMove)
    document.body.addEventListener('mouseup', handleMouseUp)
    console.log('startX | startY: ', startX, startY)
}

function handleMouseMove(event) {
    endX = event.clientX;
    endY = event.clientY;
    console.log('endX | endY: ', endX, endY)
}

function handleMouseUp() {
    document.body.removeEventListener('mousemove', handleMouseMove)
    document.body.removeEventListener('mouseup', handleMouseUp)
}

document.addEventListener('mousedown', handleMouseDown)

window.onload = function () {
    containWrap = document.getElementById('containWrap')
    console.log('containWrap: ', containWrap)
}

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JavaScript 拖拽布局</title>
</head>

<body>
	<div class="contain-wrap" id="containWrap">
		<!-- <div class="box-wrap"> -->
			<!-- <div class="handle-box-wrap"> -->
				<!-- 上(北) -->
				<!-- <span class="btn-resize n-resize"></span> -->
                <!-- 右上（北/东） -->
                <!-- <span class="btn-resize ne-resize"></span> -->
                <!-- 右（东） -->
                <!-- <span class="btn-resize e-resize"></span> -->
                <!-- 右下（南/东） -->
                <!-- <span class="btn-resize se-resize"></span> -->
                <!-- 下（南） -->
                <!-- <span class="btn-resize s-resize"></span> -->
                <!-- 左下（南/西） -->
                <!-- <span class="btn-resize sw-resize"></span> -->
                <!-- 左（西） -->
                <!-- <span class="btn-resize w-resize"></span> -->
                <!-- 左上（北/西） -->
                <!-- <span class="btn-resize nw-resize"></span> -->
            <!-- </div> -->
        <!-- </div> -->
    </div>
</body>
</html>

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.contain-wrap {
    width: 100vw;
    height: 100vh;
    cursor: crosshair; /* 十字线 */
    /* background: lightblue; */
    position: relative;
    z-index: 3;
    /* border: dotted red 1px; */
}

.box-wrap {
    width: 0px;
    height: 0px;
    border: dashed 1px lightskyblue;
}

.handle-box-wrap {
    width: 100%;
    height: 100%;
    cursor: move; /* 移动 */
    border: 1px solid lightpink;
    position: relative;
    z-index: 5;
}

.btn-resize {
    display: block;
    width: 8px;
    height: 8px;
    border: 1px solid lightpink;
    position: absolute;
    z-index: 7;
}

/* 上 */
.n-resize {
    cursor: n-resize; /* 上移 */
    left: 50%;
    top: -4px;
    margin-left: -4px;
}

/* 右上 */
.ne-resize {
    cursor: ne-resize;
    right: -4px;
    top: -4px;
}

/* 右 */
.e-resize {
    cursor: e-resize;
    right: -4px;
    top: 50%;
    margin-top: -4px;
}

/* 右下 */
.se-resize {
    cursor: se-resize;
    right: -4px;
    bottom: -4px;
}

/* 下 */
.s-resize {
    cursor: s-resize;
    left: 50%;
    bottom: -4px;
    margin-left: -4px;
}

/* 左下 */
.sw-resize {
    cursor: sw-resize;
    left: -4px;
    bottom: -4px;
}

/* 左 */
.w-resize {
    cursor: w-resize;
    left: -4px;
    top: 50%;
    margin-top: -4px;
}

/* 左上 */
.nw-resize {
    cursor: nw-resize;
    left: -4px;
    top: -4px;
}