类似百度登录的一个效果，鼠标可以随意移动登录框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.layer {
width: 200px;
height: 200px;
background-color: red;
cursor: move;
position: absolute;
}
</style>
</head>
<body>
<div class="layer"></div>
<script>
let mylayer = document.querySelector('.layer');
let canMove = false;
let x = 0, y = 0;
let maxLeft=window.innerWidth-mylayer.offsetWidth;
let maxTop=window.innerHeight-mylayer.offsetHeight;
mylayer.onmousedown = function (e) {
canMove = true;
x = e.pageX - mylayer.offsetLeft;
y = e.pageY - mylayer.offsetTop ;
console.log(111)
}
window.onmousemove = function (e) {
if (canMove) {
let left = e.pageX - x;
let top = e.pageY - y;
if(left<0)left=0;
if(left>maxLeft)left=maxLeft;
if(top<0)top=0;
if(top>maxTop)top=maxTop;
mylayer.style.left = left + 'px';
mylayer.style.top = top + 'px';
}
}
window.onmouseup = function () {
canMove = false
}
</script>
</body>
</html>
浙公网安备 33010602011771号