一. 实现鼠标点击div后,div跟随鼠标移动
<!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>
<link rel="stylesheet" href="./index.css" />
</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>
let dragElement = document.getElementById('drag')
dragElement.addEventListener('mousedown',startDrag)
// 元素拖动
function startDrag(event){
event.preventDefault()
const currentHandle = event.target
// console.log('bb',currentHandle.className);
const isResizeHandle = currentHandle.className.includes("resize-handle")
if(isResizeHandle) return
const startX = event.clientX // 获取当前点击的横向距离
const startY = event.clientY // 获取当前点击的纵向距离
const startLeft = dragElement.offsetLeft // 获取drag盒子距离外层父级div(相对于最近的祖先定位元素)的横向距离
const startTop = dragElement.offsetTop // 获取drag盒子距离外层父级div的纵向距离
document.addEventListener("mousemove", drag)
document.addEventListener("mouseup", stopDrag)
function drag(e){
let cx = e.clientX - startX // 获取横向偏移量
let cy = e.clientY - startY // 获取纵向偏移量
let newx = cx + startLeft
let newy = cy + startTop
dragElement.style.left = newx + 'px'
dragElement.style.top = newy + 'px'
}
function stopDrag() {
document.removeEventListener("mousemove", drag);
document.removeEventListener("mouseup", stopDrag);
}
}
</script>
<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>
</html>
二. 实现鼠标点击锚点,拖拽缩放div
<!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>
<link rel="stylesheet" href="./index.css" />
</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>
let dragElement = document.getElementById('drag')
// 缩放功能
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] // 获取后面的类名
let startX = event.clientX // 获取当前点击的横向距离
let startY = event.clientY // 获取当前点击的纵向距离
let startWidth = dragElement.offsetWidth // 获取drag盒子的宽度
let startHeight = dragElement.offsetHeight //获取drag盒子的高度
let startLeft = dragElement.offsetLeft // 获取drag盒子距离外层父级div(相对于最近的祖先定位元素)的横向距离
let startTop = dragElement.offsetTop //获取drag盒子距离外层父级div的纵向距离
document.addEventListener("mousemove", resize);
document.addEventListener("mouseup", stopResize);
function resize(e){
let cx = e.clientX - startX
let cy = e.clientY - startY
let width = startWidth,
height = startHeight,
left = startLeft,
top = startTop
//不同锚点我们需要对元素进行不同的操作,我们可以分为四个方位来进行判断并区分操作:
if(direction.includes('left')){
left = startLeft + cx/2 + 'px'
width = width - cx + 'px'
}
if(direction.includes('right')){
left = startLeft + cx/2 + 'px'
width = width + cx + 'px'
}
if(direction.includes('top')){
top = startTop + cy/2 + 'px'
height = height - cy + 'px'
}
if(direction.includes('bottom')){
top = startTop + cy/2 + 'px'
height = height + cy + 'px'
}
// 等于0的时候我们不再对其进行缩放操作
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>
<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>
</html>
效果图: