下面是一个完整的实现方案，通过按住按钮拖动来改变指定DIV的宽高：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖动按钮改变DIV大小</title>
<style>
#resizable-box {
width: 300px;
height: 200px;
background-color: #f0f0f0;
border: 1px solid #ccc;
position: relative;
margin: 20px;
}
#resize-handle {
width: 20px;
height: 20px;
background-color: #666;
border-radius: 50%;
position: absolute;
bottom: 10px;
right: 10px;
cursor: nwse-resize;
}
</style>
</head>
<body>
<div id="resizable-box">
<div id="resize-handle"></div>
可调整大小的DIV
</div>
<script src="script.js"></script>
</body>
</html>
js代码：
document.addEventListener('DOMContentLoaded', function() {
const resizableBox = document.getElementById('resizable-box');
const resizeHandle = document.getElementById('resize-handle');
let isResizing = false;
let startX, startY, startWidth, startHeight;
// 鼠标按下事件
resizeHandle.addEventListener('mousedown', function(e) {
isResizing = true;
// 记录初始位置和尺寸
startX = e.clientX;
startY = e.clientY;
startWidth = parseInt(document.defaultView.getComputedStyle(resizableBox).width, 10);
startHeight = parseInt(document.defaultView.getComputedStyle(resizableBox).height, 10);
// 防止文本选中
e.preventDefault();
});
// 鼠标移动事件
document.addEventListener('mousemove', function(e) {
if (!isResizing) return;
// 计算鼠标移动距离
const deltaX = e.clientX - startX;
const deltaY = e.clientY - startY;
// 计算新尺寸（这里可以调整比例，例如保持宽高比）
const newWidth = startWidth + deltaX;
const newHeight = startHeight + deltaY;
// 应用新尺寸
resizableBox.style.width = Math.max(100, newWidth) + 'px'; // 最小宽度100px
resizableBox.style.height = Math.max(50, newHeight) + 'px'; // 最小高度50px
});
// 鼠标释放事件
document.addEventListener('mouseup', function() {
isResizing = false;
});
// 可选：防止拖动时页面滚动
document.addEventListener('dragover', function(e) {
e.preventDefault();
}, false);
});
如果你想支持四个方向的拖动（右下、右上、左下、左上），可以修改为：
document.addEventListener('DOMContentLoaded', function() {
const resizableBox = document.getElementById('resizable-box');
const resizeHandle = document.getElementById('resize-handle');
let isResizing = false;
let startX, startY, startWidth, startHeight, startLeft, startTop;
let resizeDirection = 'se'; // 默认右下角方向
// 鼠标按下事件
resizeHandle.addEventListener('mousedown', function(e) {
isResizing = true;
// 确定拖动方向（这里简化处理，只处理右下角）
// 实际应用中可以根据鼠标位置判断8个方向
resizeDirection = 'se';
// 记录初始位置和尺寸
startX = e.clientX;
startY = e.clientY;
startWidth = parseInt(document.defaultView.getComputedStyle(resizableBox).width, 10);
startHeight = parseInt(document.defaultView.getComputedStyle(resizableBox).height, 10);
startLeft = resizableBox.offsetLeft;
startTop = resizableBox.offsetTop;
e.preventDefault();
});
// 鼠标移动事件
document.addEventListener('mousemove', function(e) {
if (!isResizing) return;
const deltaX = e.clientX - startX;
const deltaY = e.clientY - startY;
let newWidth = startWidth;
let newHeight = startHeight;
let newLeft = startLeft;
let newTop = startTop;
switch(resizeDirection) {
case 'se': // 右下角
newWidth = Math.max(100, startWidth + deltaX);
newHeight = Math.max(50, startHeight + deltaY);
break;
case 'sw': // 左下角
newWidth = Math.max(100, startWidth - deltaX);
newHeight = Math.max(50, startHeight + deltaY);
newLeft = startLeft + deltaX;
break;
case 'ne': // 右上角
newWidth = Math.max(100, startWidth + deltaX);
newHeight = Math.max(50, startHeight - deltaY);
newTop = startTop + deltaY;
break;
case 'nw': // 左上角
newWidth = Math.max(100, startWidth - deltaX);
newHeight = Math.max(50, startHeight - deltaY);
newLeft = startLeft + deltaX;
newTop = startTop + deltaY;
break;
}
resizableBox.style.width = newWidth + 'px';
resizableBox.style.height = newHeight + 'px';
resizableBox.style.left = newLeft + 'px';
resizableBox.style.top = newTop + 'px';
});
// 鼠标释放事件
document.addEventListener('mouseup', function() {
isResizing = false;
});
// 防止拖动时页面滚动
document.addEventListener('dragover', function(e) {
e.preventDefault();
}, false);
});
如果需要保持宽高比，可以修改鼠标移动事件处理：
document.addEventListener('mousemove', function(e) {
if (!isResizing) return;
const deltaX = e.clientX - startX;
const deltaY = e.clientY - startY;
// 计算宽高比
const aspectRatio = startWidth / startHeight;
// 根据X或Y变化来计算尺寸
let newWidth = startWidth + deltaX;
let newHeight = newWidth / aspectRatio;
// 或者根据Y变化计算
// let newHeight = startHeight + deltaY;
// let newWidth = newHeight * aspectRatio;
// 应用新尺寸
resizableBox.style.width = Math.max(100, newWidth) + 'px';
resizableBox.style.height = Math.max(50, newHeight) + 'px';
});
这个实现可以让你通过拖动按钮来调整DIV的大小，你可以根据需要进一步定制样式和功能。
0 个评论