<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-family: "Microsoft YaHei", serif;
}
body, dl, dd, p, h1, h2, h3, h4, h5, h6 {
margin: 0;
}
ol, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none
}
#wrap{
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background-color: #8CC1DE;
cursor: pointer;
user-select: none;
}
</style>
</head>
<body>
<div id="wrap"></div>
<script>
let oWrap = document.getElementById("wrap");
// 极限条件
let maxLeft = document.documentElement.clientWidth - oWrap.offsetWidth;
let maxTop = document.documentElement.clientHeight - oWrap.offsetHeight;
window.onresize = function(){
maxLeft = document.documentElement.clientWidth - oWrap.offsetWidth;
maxTop = document.documentElement.clientHeight - oWrap.offsetHeight;
// 控制极限
let left = Math.min(oWrap.offsetLeft,maxLeft);
let top = Math.min(oWrap.offsetTop,maxTop);
// 盒子当前位置 = 盒子按下位置 + 盒子的位移量
oWrap.style.left = left + "px";
oWrap.style.top = top + "px";
};
console.log(document.documentElement.clientWidth);
// 判断是否按下
let bool = false;
let startX,boxX,startY,boxY;
oWrap.onmousedown = function(ev){
bool = true;
// 鼠标按下位置
startX = ev.pageX;
startY = ev.pageY;
// 盒子按下时的位置
boxX = oWrap.offsetLeft;
boxY = oWrap.offsetTop;
};
document.onmousemove = function(ev){
if (!bool) return;
let nowX = ev.pageX;
let nowY = ev.pageY;
// 鼠标位置的位移量 === 盒子位置的变化量
let x_ = nowX - startX;
let y_ = nowY - startY;
// 计算盒子的位置
let left = boxX + x_;
let top = boxY + y_;
// 控制极限
left = Math.max(left,0); //left不能小于0
left = Math.min(left,maxLeft); //left不能大于maxLeft
top = Math.max(top,0);
top = Math.min(top,maxTop);
// 盒子当前位置 = 盒子按下位置 + 盒子的位移量
oWrap.style.left = left + "px";
oWrap.style.top = top + "px";
};
document.onmouseup = function(){
bool = false;
};
</script>
</body>
</html>
Python3Turtle