js——鼠标拖拽缩放
2023-09-24 本文已影响0人
弦生_a3a3
案例图片展示：
image.png
代码块：
<!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>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
position: relative;
}
#demo{
position: absolute;
left: 20px;
top: 20px;
border: 1px solid red;
width: 300px;
height: 300px;
}
#demo>p{
width: 10px;
height: 10px;
background-color: #000;
position: absolute;
}
.top-left{
left: -5px;
top: -5px;
}
.top-rig{
right:-5px;
top:-5px;
}
.bt-left{
left:-5px;
bottom:-5px;
}
.bt-rig{
right:-5px;
bottom:-5px;
}
</style>
<body>
<div id="demo">
<p class="top-left"></p>
<p class="top-rig"></p>
<p class="bt-left"></p>
<p class="bt-rig"></p>
</div>
<script>
let demo = document.getElementById('demo');
const [ tl,tr,bl,br ] = demo.children;
let data = {
move:false,
offsetX:0,
slace:false,
slasceX:0,
slasceY:0,
slasceDemoH:0,
slasceDemoT:0,
slasceDemoW:0,
slasceDemoWL:0,
domW:0,
domH:0,
offsetY:0,
className:''
};
data.domW = demo.offsetWidth;
data.domH = demo.offsetHeight;
demo.addEventListener('mousedown',({clientX,clientY})=>{
data.offsetX = clientX - demo.offsetLeft;
data.offsetY = clientY - demo.offsetTop;
data.move = true;
});
window.addEventListener('mousemove',({clientX,clientY})=>{
if(data.move){
let left = clientX - data.offsetX;
let top = clientY - data.offsetY;
let maxW = window.innerWidth - demo.offsetWidth -5;
let maxH = window.innerHeight - demo.offsetHeight -5;
if(left<=0) return;
if(top<=0) return;
if(left>=maxW) left = maxW;
if(top>=maxH) top = maxH;
demo.style['left'] =left +'px';
demo.style['top'] = top +'px';
}
});
window.addEventListener('mouseup',()=>{
data.move = false;
data.slace = false;
});
const rigMoveDown = dom =>{
dom.addEventListener('mousedown',e=>{
e.stopPropagation();
const { clientX,clientY,target } = e;
data.className=target.classList['0'];
data.slasceX = clientX;
data.slasceY = clientY;
data.slasceDemoH = demo.offsetHeight;
data.slasceDemoW = demo.offsetWidth;
data.slasceDemoT = demo.offsetTop;
data.slasceDemoWL = demo.offsetLeft;
data.slace = true;
})
};
rigMoveDown(br);
rigMoveDown(tr);
rigMoveDown(tl);
rigMoveDown(bl);
window.addEventListener('mousemove',e=>{
e.stopPropagation();
if(data.slace){
const { clientX,clientY } = e;
let y = clientY - data.slasceY;
let x = clientX - data.slasceX;
let height = data.slasceDemoH - y;
let width = data.slasceDemoW - x;
if(height<=10) return height = 10;
if(width<=10) return width = 10;
console.log("x-y",x,y)
switch(data.className){
case 'bt-rig':
demo.style['width'] = clientX - demo.offsetLeft + 'px';
demo.style['height'] = clientY - demo.offsetTop + 'px';
break;
case 'top-rig':
demo.style['height'] = height + 'px';
demo.style['top'] = data.slasceDemoT + y + 'px';
demo.style['width'] = clientX - demo.offsetLeft + 'px';
break;
case 'top-left':
console.log("x",x)
demo.style['height'] = height + 'px';
demo.style['top'] = data.slasceDemoT + y + 'px';
demo.style['left'] = data.slasceDemoWL + x + 'px';
demo.style['width'] = width + 'px';
break;
case 'bt-left':
demo.style['height'] = data.slasceDemoH + y + 'px';
demo.style['left'] = data.slasceDemoWL + x + 'px';
demo.style['width'] = width + 'px';
break;
}
}
});
</script>
</body>
</html>
作者太懒了都不想解释，仔细斟酌
