在需要实现的盒子右下角添加一个图标,并且给图标添加点击事件,详情见代码。还可以将鼠标样式也调整成这样:
代码如下:
box.addEventListener('mousedown', resizeEventBox);
function resizeEventBox(e) {
let oldX = e.pageX;
let oldY = e.pageY;
//鼠标点击的位置减去offset偏移量,就等于盒子目前的width,height(因为调整大小图标放右下角)
let width = e.pageX - eventBox.value.offsetLeft;
let height = e.pageY - eventBox.value.offsetTop;
document.addEventListener('mousemove', move);
function move(e) {
let newX = e.pageX;
let newY = e.pageY;
eventBox.style.width = width + (newX - oldX ) + 'px';
eventBox.style.height = height + (newY - oldY) + 'px';
}
// (3)鼠标弹起,就让鼠标移动事件移除
document.addEventListener('mouseup', () => {
document.removeEventListener('mousemove', move);
});
}
然后就可以对盒子进行大小调节,最好还是给盒子设置一个minwidth,minheight。
当然,前提是盒子的样式必须是绝对定位,不然无效。