拖动侧边栏以独立调整元素宽度，页面上任意数量的元素

Question

我正在尝试通过自己的句柄独立调整元素的宽度（.box）。 与我聚集在一起的只有最后一个元素是可调整大小的。 Min-width 和 max-width 应该不是问题，因为它是用 css 处理的。

我想：

1. 通过其句柄（.handle）独立调整任何元素（.box）的宽度。 （当它的手柄被拖动时，只有该框调整大小）
2. 优化代码，例如whenDragging() 函数（现在'mouseup' 事件即使在我不调整大小时也会被调用）- 不确定是否需要？

var isHandlerDragging = false;

var handlers = document.querySelectorAll('.handler');
  for( i=0; i < handlers.length; i++ ){
    var handler = handlers[i];
};
  
var wrappers = document.querySelectorAll('.wrapper');
  for( i=0; i < wrappers.length; i++ ){
    var wrapper = wrappers[i];
};

var boxes = document.querySelectorAll('.box');
  for( i=0; i < boxes.length; i++ ){
    var box = boxes[i];
};

function whenDragging() {
  if(isHandlerDragging === true){
    document.querySelector('*').style.userSelect = "none";
    document.querySelector('*').style.pointerEvents = "none";      
    document.querySelector('*').style.cursor = "ew-resize";
  }else{
    document.querySelector('*').style.cssText = null;
  };
}

document.addEventListener('mousedown', function(e) {
  if (e.target === handler) {
    isHandlerDragging = true;
  }
  whenDragging()
});

document.addEventListener('mousemove', function(e) {
  if (!isHandlerDragging) {
    return false;
  }
  var containerOffsetLeft = wrapper.offsetLeft;
  var pointerRelativeXpos = e.clientX - containerOffsetLeft;
  box.style.width = pointerRelativeXpos + 'px';
});

document.addEventListener('mouseup', function(e) {
  isHandlerDragging = false;
  whenDragging()
});

.wrapper{
  display:flex;
  margin-top:20px;
}

.box{
  width:100%;
  max-width:100%;
  min-width:100px;
  height:50px;
  border:0;
  background-color:black;
}

.handler{
  width:20px;
  flex-shrink:0;
  cursor: ew-resize;
  background-color:red;
}

<div class="wrapper">
  <iframe class="box"></iframe>
  <div class="handler"></div>
</div>

<div class="wrapper">
  <iframe class="box"></iframe>
  <div class="handler"></div>
</div>

Answer 1

在这个例子中有几个主要特点需要注意：

• 包装器是弹性盒，因此我们必须考虑如果我们尝试将它们保持在 100% 宽度但改变内部元素，假设其宽度以 px 为单位设置会发生什么
• 框元素是 iframe。这意味着默认情况下，它们上的任何鼠标事件都不会被执行（在此级别），结果是用户将光标移到它们上面什么都不做。

代码中还有其他一些需要更改的内容 - 特别是对鼠标向上/向下/移动采取的操作 - 问题中的代码一直使用相同的框元素（我相信是错误的）所以我们将其更改为在与其关联的处理程序上的 mousedown 上拾取当前框。我们还让它成为最大宽度为 100%（其容器）的包装器，因此不可能将光标向右移动到右侧边缘，从而使处理程序离开容器。

const container = document.querySelector('.container');

let box = ''; //initial situation, no box is being dragged

container.addEventListener('mousedown', function(e) {
  if (e.target.classList.contains('handler')) {
    box = e.target.parentElement.querySelector('.box');
  }
});

container.addEventListener('mousemove', function(e) {
  if (box != '') {
   box.parentElement.style.width = (e.clientX + 20) + 'px';
  }
});

container.addEventListener('mouseup', function(e) {//from mouseup
  box = '';
});

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.wrapper{
  display:flex;
  margin: 0;
  padding: 0;
  margin-top:20px;
  width: 100%;
  max-width: 100%;
}

.box{
  width:100%;
  display: inline-block;
  /*max-width:100%;*/
  min-width:100px;
  height:50px;
  border:0;
  background-color:black;
  margin: 0;
  padding: 0;
}

.handler{
  display: inline-block;
  width:20px;
  height: 50px;
  flex-shrink:0;
  cursor: ew-resize;
  background-color:red;
  margin: 0;
  padding: 0;
}

iframe {
 pointer-events: none;
}

<div class="container">
  <div class="wrapper">
    <iframe class="box"></iframe>
    <div class="handler"></div>
  </div>

  <div class="wrapper">
    <iframe class="box"></iframe>
    <div class="handler"></div>
  </div>
</div>

注意：现在可以通过将指针事件设置为无来查看 iframe 上的鼠标操作。这可能适合也可能不适合现实世界的场景，但它回答了问题。