模仿windows界面的鼠标拖拽，在网页上生成一个鼠标点击拖拽事件，
需要注意：需要设置一个控制的开关，判断为开时正常拖拽，判断为关时，拖拽鼠标获得的矩形立即消失；
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
position: absolute;
width: 1px;
height: 1px;
background: pink;
border: solid 1px #54a;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
var f
//设置一个开关
var w = 0,
h = 0,
l = 0,
t = 0;
var movex = 0,
movey = 0,
downx = 0,
downy = 0;
window.onmousedown = (e) => {
f = true;
e = window.event || e.event;
//当点击按下时,开关开启
downx = e.clientX;
downy = e.clientY;
//获取按下的点的坐标
window.onmousemove = (e) => {
e = window.event || e.event
movex = e.clientX;
movey = e.clientY;
//获取终止位置的点的坐标
l = Math.min(movex, downx);
t = Math.min(movey, downy);
w = Math.abs(movex - downx);
h = Math.abs(movey - downy);
//计算出移动的长和宽
if (f) {
div.style.cssText = `left:${l}px;top:${t}px;width:${w}px;height:${h}px`;
}
//当开关为开时，div中生成一个矩形
}
}
window.onmouseup = (e) => {
f = false
e = window.event || e.event
div.style.cssText = ``;
//当鼠标抬起，开关为关；生成的矩形消失
}
</script>
</body>
</html>
网友评论