Question

我有两个div作为两个面板，一个在左边，一个在右边。

他们占据了70％和30％的面积。

我之间有一个分隔符。

当我向左或向右拖动分隔符时，我希望它保持为分隔符的位置。即，我应该能够通过拖动动态调整左右div的大小。

这是我的代码：

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。

Answer 1

如果您使用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左上角的位置（以px为单位）。这将为您提供相同的结果，但使用百分比，以便在调整窗口大小时调整列：

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) + '%';
});

Answer 2

采取一些不同的方法：我使用了一些耦合鼠标向下和鼠标向上的监听器，而不是使用拖放功能。这具有更好的跨浏览器兼容性（至少就我的测试而言）并且它具有能够轻松控制光标的额外好处。

var resize = function(event) {
    var newX = event.clientX;
    document.getElementById('left').style.width = (newX / window.innerWidth * 100) + '%';
};
document.getElementById('separator').addEventListener('mousedown', function(event) {
  document.addEventListener('mousemove', resize);
  document.body.style.cursor = 'col-resize';
});
document.addEventListener('mouseup', function(event) {
  document.removeEventListener('mousemove', resize);
  document.body.style.cursor = '';
});

如何通过拖动正确调整元素大小？

2 个答案: