Javascript 如何通过拖动正确调整图元的大小？

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

他们占据了70%和30%的面积

我在他们之间有一个分隔符

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

以下是我的代码：

HTML:

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

问题是：

调整大小时，分隔符会随机跳转。它甚至倒了很多次。我不知道发生了什么事

开始拖动时，鼠标光标变为手形。我希望它保持一个

列

它很难拖动

---

请不要使用JQuery。

如果您使用

控制台.log（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) + '%';
});

---

如果您使用

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

---

如果您使用

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

---

如果您使用

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

---

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

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

---

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

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

---

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

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

---

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

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

---

我仍在研究如何使光标保持不变。我还不太走运。我还在研究如何让光标保持不变。我还不太走运。我还在研究如何让光标保持不变。我还不太走运。我还在研究如何让光标保持不变。我运气还不太好。