<!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>
<style>
.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: #f0f0f0;
cursor: move;
}
.resize-handle {
position: absolute;
width: 10px;
height: 10px;
background-color: #000;
}
.top-left {
top: -5px;
left: -5px;
cursor: nw-resize;
}
.top {
top: -5px;
left: calc(50% - 5px);
cursor: ns-resize;
}
.top-right {
top: -5px;
right: -5px;
cursor: ne-resize;
}
.right {
top: calc(50% - 5px);
right: -5px;
cursor: ew-resize;
}
.bottom-right {
bottom: -5px;
right: -5px;
cursor: se-resize;
}
.bottom {
bottom: -5px;
left: calc(50% - 5px);
cursor: ns-resize;
}
.bottom-left {
bottom: -5px;
left: -5px;
cursor: sw-resize;
}
.left {
top: calc(50% - 5px);
left: -5px;
cursor: ew-resize;
}
</style>
</head>
<body>
<div class="box" id="drag">
<div class="resize-handle top-left"></div>
<div class="resize-handle top"></div>
<div class="resize-handle top-right"></div>
<div class="resize-handle right"></div>
<div class="resize-handle bottom-right"></div>
<div class="resize-handle bottom"></div>
<div class="resize-handle bottom-left"></div>
<div class="resize-handle left"></div>
</div>
</body>
<script>
const dragElement=document.getElementById("drag");
// 拖拽功能
dragElement.addEventListener("mousedown",startDrag);
function startDrag (event) {
event.preventDefault();
const currentHandle=event.target;
const isResizeHandle=currentHandle.className.includes("resize-handle");
if(isResizeHandle) return;
const startX=event.clientX;
const startY=event.clientY;
const startLeft=dragElement.offsetLeft;
const startTop=dragElement.offsetTop;
document.addEventListener("mousemove",drag);
document.addEventListener("mouseup",stopDrag);
function drag (event) {
const dx=event.clientX-startX;
const dy=event.clientY-startY;
const newLeft=startLeft+dx;
const newTop=startTop+dy;
dragElement.style.left=newLeft+"px";
dragElement.style.top=newTop+"px";
}
function stopDrag () {
document.removeEventListener("mousemove",drag);
document.removeEventListener("mouseup",stopDrag);
}
}
// 缩放功能
const resizeHandles=document.getElementsByClassName("resize-handle");
Array.from(resizeHandles).forEach((handle) => {
handle.addEventListener("mousedown",startResize);
});
function startResize (event) {
event.preventDefault();
const currentHandle=event.target;
const direction=currentHandle.className.split(" ")[1];
const startX=event.clientX;
const startY=event.clientY;
const startWidth=dragElement.offsetWidth;
const startHeight=dragElement.offsetHeight;
const startLeft=dragElement.offsetLeft;
const startTop=dragElement.offsetTop;
document.addEventListener("mousemove",resize);
document.addEventListener("mouseup",stopResize);
function resize (event) {
const dx=event.clientX-startX;
const dy=event.clientY-startY;
let width=startWidth,
height=startHeight,
left=startLeft,
top=startTop;
if(direction.includes("left")) {
width=startWidth-dx+"px";
left=startLeft+dx/2+"px";
}
if(direction.includes("right")) {
width=startWidth+dx+"px";
left=startLeft+dx/2+"px";
}
if(direction.includes("top")) {
height=startHeight-dy+"px";
top=startTop+dy/2+"px";
}
if(direction.includes("bottom")) {
height=startHeight+dy+"px";
top=startTop+dy/2+"px";
}
if(parseInt(width)<=0||parseInt(height)<=0) return;
dragElement.style.width=width;
dragElement.style.height=height;
dragElement.style.left=left;
dragElement.style.top=top;
}
function stopResize () {
document.removeEventListener("mousemove",resize);
document.removeEventListener("mouseup",stopResize);
}
}
</script>
</html>
作者：JYeontu
链接：https://juejin.cn/post/7282951856514793513
来源：稀土掘金
标签：const,缩放,top,拖拽,5px,div,event,resize,left From： https://www.cnblogs.com/chenzxl/p/17836796.html