当你想实现点击并拖动某个dic元素来调整其大小的时候，我们可以通过如下代码(可直接复制粘贴运行)实现效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resizable Element</title>
<style>
.resizable {
width: 200px;
height: 200px;
background-color: lightgray;
border: 1px solid #ccc;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<div class="resizable">
<!-- 这里放置需要调整大小的内容 -->
</div>
<script>
document.addEventListener('mousedown', function(event) {
if (event.target.classList.contains('resizable')) {
event.preventDefault();
event.target.classList.add('resizing');
const initialX = event.clientX;
const initialY = event.clientY;
const mouseMoveListener = function(e) {
const width = event.target.offsetWidth + (e.clientX - initialX);
const height = event.target.offsetHeight + (e.clientY - initialY);
event.target.style.width = width + 'px';
event.target.style.height = height + 'px';
};
const mouseUpListener = function() {
event.target.classList.remove('resizing');
event.target.style.userSelect = 'auto';
event.target.style.cursor = 'auto';
document.body.style.cursor = 'auto';
document.removeEventListener('mousemove', mouseMoveListener);
document.removeEventListener('mouseup', mouseUpListener);
};
event.target.style.userSelect = 'none';
event.target.style.cursor = 'nwse-resize';
document.body.style.cursor = 'nwse-resize';
document.addEventListener('mousemove', mouseMoveListener);
document.addEventListener('mouseup', mouseUpListener);
}
});
</script>
</body>
</html>
注意！！！：
但在实际开发运用中，上面的代码是远远不够的，运行过上面代码的伙伴肯定能感觉到效果是不理想的，只能实现基本的调整页面大小的需求，而在调整页面大小的过程中是不灵活的，所以我们可以通过以下方式得到改善——添加手柄：在下面的优化代码中，我们使用JavaScript 实现了调整大小的功能。当用户点击并拖动位于 .resize-handle 类名的元素时，会触发相应的事件处理函数，从而实现调整大小的效果。这样就能够更灵活地控制调整大小的行为和效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resizable Element</title>
<style>
.resizable {
width: 200px;
height: 200px;
background-color: lightgray;
border: 1px solid #ccc;
overflow: auto;
position: relative;
}
.resize-handle {
width: 10px;
height: 10px;
background-color: #000;
position: absolute;
bottom: 0;
right: 0;
cursor: nwse-resize;
}
</style>
</head>
<body>
<div class="resizable">
<!-- 这里放置需要调整大小的内容 -->
<div class="resize-handle"></div>
</div>
<script>
const resizableElement = document.querySelector('.resizable');
const resizeHandle = resizableElement.querySelector('.resize-handle');
let isResizing = false;
let initialX;
let initialY;
let originalWidth;
let originalHeight;
resizeHandle.addEventListener('mousedown', function(event) {
event.preventDefault();
isResizing = true;
initialX = event.clientX;
initialY = event.clientY;
originalWidth = parseFloat(getComputedStyle(resizableElement, null).getPropertyValue('width'));
originalHeight = parseFloat(getComputedStyle(resizableElement, null).getPropertyValue('height'));
document.addEventListener('mousemove', resize);
document.addEventListener('mouseup', stopResize);
});
function resize(event) {
if (isResizing) {
const width = originalWidth + (event.clientX - initialX);
const height = originalHeight + (event.clientY - initialY);
resizableElement.style.width = width + 'px';
resizableElement.style.height = height + 'px';
}
}
function stopResize() {
isResizing = false;
document.removeEventListener('mousemove', resize);
document.removeEventListener('mouseup', stopResize);
}
</script>
</body>
</html>
最后一句：代码都是可直接运行的，所以大家可以先复制代码到自己电脑的编辑器上面运行看效果，是否能达到自己的预期需求哦！
