要求:点击黑色边缘的盒子,点住然后拉拽,改变盒子的大小,vue项目
思路:给盒子四周定位上四条线,给四条线绑定方法,获取拖拽开始到结束的x、y位置上的变化,通过js对宽高进行改变
注释:blackBox为黑色边缘盒子,topLine、rightLine、bottomLine、leftLine为div模拟的红色线条
<div class="blackBox"
<div
class="topLine"
@mousedown="
e => {
handleMouseDown(e, 'top');
}
"
></div>
<div
class="rightLine"
@mousedown="
e => {
handleMouseDown(e, 'right');
}
"
></div>
<div
class="bottomLine"
@mousedown="
e => {
handleMouseDown(e, 'bottom');
}
"
></div>
<div
class="leftLine"
@mousedown="
e => {
handleMouseDown(e, 'left');
}
"
></div>
</div>
.blackBox{
width:200px;
height:200px;
border: 1px solid black;
position: relative;
.topLine {
width: 100%;
height: 1px;
cursor: ns-resize;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
}
.rightLine {
width: 1px;
height: 100vh;
background-color: red;
position: absolute;
top: 0px;
right: 0px;
cursor: ew-resize;
}
.bottomLine {
width: 100%;
height: 1px;
background-color: red;
position: absolute;
bottom: 0px;
left: 0px;
cursor: ns-resize;
}
.leftLine {
width: 1px;
height: 100vh;
background-color: red;
position: absolute;
top: 0px;
left: 0px;
cursor: ew-resize;
}
}
methods:{
handleMouseDown(event, value) {
this.$nextTick(() => {
let isDragging = false; // 判断是否正在拖动
let startX = null; // 记录起始位置的x坐标
let startY = null; // 记录起始位置的y坐标
let initialWidth = null; // 记录初始宽度
let initialHeight = null; // 记录初始高度
let initialTop = null; // 记录初始top
let initialLeft = null; // 记录初始left
const blackBoxEle = document.querySelector(
".blackBox"
); // 获取盒子元素
event.preventDefault(); // 防止默认行为(如选中文本)
isDragging = true;
startX = event.clientX; // 记录起始位置的x坐标
startY = event.clientY; // 记录起始位置的y坐标
initialWidth = parseInt(getComputedStyle(blackBoxEle).width); // 记录初始宽度
initialHeight = parseInt(getComputedStyle(blackBoxEle).height); // 记录初始高度
initialTop = parseInt(getComputedStyle(blackBoxEle).top); // 记录初始top
initialLeft = parseInt(getComputedStyle(blackBoxEle).left); // 记录初始left
const handleMouseMove = (event, value) => {
if (isDragging) {
if (value === "top" || value === "bottom") {
const deltaY = event.clientY - startY; // 计算鼠标相对于起始位置的垂直距离
const newHeight =
value === "top"
? initialHeight - deltaY
: initialHeight + deltaY; // 新的高度等于原有高度加上距离变化量
blackBoxEle.style.height = newHeight + "px"; // 设置盒子的高度
if (value === "top") {
blackBoxEle.style.top = initialTop + deltaY + "px";
}
} else if (value === "right" || value === "left") {
const deltaX = event.clientX - startX; // 计算鼠标相对于起始位置的水平距离
const newWidth =
value === "left"
? initialWidth - deltaX
: initialWidth + deltaX; // 新的宽度等于原有宽度加上距离变化量
blackBoxEle.style.width = newWidth + "px"; // 设置盒子的宽度
if (value === "left") {
blackBoxEle.style.left = initialLeft + deltaX + "px";
}
}
}
};
function handleMouseUp() {
isDragging = false;
}
document.addEventListener("mousemove", e => {
handleMouseMove(e, value);
});
document.addEventListener("mouseup", handleMouseUp);
});
},
},
beforeDestroy() {
document.onmousemove = null;
document.onmouseup = null;
},