<!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
}
#box{
position: absolute;
top: 200px;
left: 200px;
width: 150px;
height: 150px;
background-color: aquamarine;
}
#drag P{
position: absolute;
}
#drag p.e{
top: 0;
right: 0;
width: 5px;
height: 100%;
background-color: deeppink;
cursor: e-resize;
}
#drag p.s{
bottom: 0;
left: 0;
width: 100%;
height: 5px;
background-color: deeppink;
cursor: s-resize;
}
#drag p.w{
top: 0;
left: 0;
width: 5px;
height: 100%;
background-color: deeppink;
cursor: w-resize;
}
#drag p.n{
top: 0;
left: 0;
width: 100%;
height: 5px;
background-color: deeppink;
cursor: n-resize;
}
#drag p.ne{
top: 0;
right: 0;
width: 5px;
height: 5px;
background-color: aqua;
cursor: ne-resize;
}
#drag p.se{
bottom: 0;
right: 0;
width: 5px;
height: 5px;
background-color: aqua;
cursor: se-resize;
}
#drag p.sw{
bottom: 0;
left: 0;
width: 5px;
height: 5px;
background-color: aqua;
cursor: sw-resize;
}
#drag p.nw{
top: 0;
left: 0;
width: 5px;
height: 5px;
background-color: aqua;
cursor: nw-resize;
}
#drag p.ne{
top: 0;
right: 0;
width: 5px;
height: 5px;
background-color: aqua;
cursor: ne-resize;
}
</style>
</head>
<body>
<div id="box">
<div id="drag">
<p class="e"></p>
<p class="s"></p>
<p class="w"></p>
<p class="n"></p>
<p class="ne"></p>
<p class="se"></p>
<p class="sw"></p>
<p class="nw"></p>
</div>
</div>
<script>
(function () {
let oBox = document.getElementById("box");
let aDrag = document.querySelectorAll("#drag p");
aDrag.forEach((node,i)=>{
node.onmousedown = function (e) {
let
// 按下时刻鼠标坐标
downX = e.pageX,
downY = e.pageY,
// 按下时刻盒子大小
boxWidth = oBox.clientWidth,
boxHeight = oBox.clientHeight,
// 按下时盒子位置
boxLeft = oBox.offsetLeft,
boxTop = oBox.offsetTop;
//计算极限
maxLeft = boxLeft + boxWidth - 10;
maxTop = boxTop + boxHeight - 10;
document.onmousemove = function (e) {
// 获取move触发时鼠标坐标
let moveX = e.pageX;
let moveY = e.pageY;
// 计算盒子的位移量，因为没有办法直接弄左边的的边
let x_ = moveX - downX;
let y_ = moveY - downY;
// // 计算盒子理论宽高
// let width = boxWidth + moveX - downX;
// let height = boxHeight + moveY - downY;
//
// // 极限判断
// width = Math.max(width,10);
// height = Math.max(height,10);
let width=boxWidth,
height=boxHeight,
left=boxLeft,
top=boxTop;
// 判断是哪一个节点在动
switch (i) {
case 0: //东
width = boxWidth + x_;
break;
case 1: //南
height = boxHeight + y_;
break;
case 2: //西
// 计算理论属性值
width = boxWidth - x_;
left = boxLeft + x_;
break;
case 3: //北
height = boxHeight - y_;
top = boxTop + y_;
break;
case 4: //东北
width = boxWidth + x_;
height = boxHeight - y_;
top = boxTop + y_;
break;
case 5: //东南
width = boxWidth + x_;
height = boxHeight + y_;
break;
case 6: //西南
width = boxWidth - x_;
left = boxLeft + x_;
height = boxHeight + y_;
break;
case 7: //西北
width = boxWidth - x_;
left = boxLeft + x_;
height = boxHeight - y_;
top = boxTop + y_;
break;
}
// 限制极限
width = Math.max(width,10);
left = Math.min(left,maxLeft);
height = Math.max(height,10);
top = Math.min(top,maxTop);
// 赋值
oBox.style.width = width +"px";
oBox.style.height = height +"px";
oBox.style.left = left +"px";
oBox.style.top = top +"px";
}
};
document.onmouseup = function () {
this.onmousemove = null;
}
})
})();
</script>
</body>
</html>
Python3Turtle
