我有两个 div 作为两个面板，一个在左边，一个在右边。
他们占据了 70% 和 30% 的区域。
我在它们之间有一个分隔符。
当我向左或向右拖动分隔符时，我希望它保留为分隔符的位置。即，我应该能够通过拖动动态调整左右 div 的大小。
这是我的代码:
http://jsbin.com/witicozi/1/edit
HTML:
<!DOCTYPE html>
<html>
<head>
<body>
<div style='height: 100px'>
<div id='left'>...</div>
<div id='separator'></div>
<div id='right'>...</div>
</div>
</body>
</html>
CSS:
#left {
float: left;
width: 70%;
height: 100%;
overflow: auto;
}
#separator {
float: left;
width: 3px;
height: 100%;
background-color: gray;
cursor: col-resize;
}
#right {
height: 100%;
overflow: auto;
}
JavaScript:
document.querySelector('#separator').addEventListener('drag', function (event) {
var newX = event.clientX;
var totalWidth = document.querySelector('#left').offsetWidth;
document.querySelector('#left').style.width = ((newX / totalWidth) * 100) + '%';
});
问题:
- 调整大小发生了，但分隔符随机跳动。它甚至跌倒了很多次。我不知道发生了什么。
- 开始拖动时，鼠标光标变为一只手。我希望它保持
col-resize。 - 很难拖动。
请不要使用 JQuery。
最佳答案
如果您使用 console.log(event)，它表明 event.clientX 没有返回您正在寻找的内容。以下 JavaScript 在 chrome 中对我有用。
document.getElementById('separator').addEventListener('drag', function(event) {
var left = document.getElementById('left');
var newX = event.offsetX + left.offsetWidth;
left.style.width = newX + 'px';
});
它返回的 event.offsetX 值是左侧 div 左上角的位置(以像素为单位)。这会给你相同的结果，但使用百分比，以便在调整窗口大小时调整列:
document.getElementById('separator').addEventListener('drag', function(event) {
var left = document.getElementById('left');
var newX = event.offsetX + left.offsetWidth;
left.style.width = (newX / window.innerWidth * 100) + '%';
});
关于javascript - 如何通过拖动正确调整元素的大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24153193/