个人中心
gpt4 book ai didi

javascript - 单击鼠标调整多个 div 的大小

转载 作者：太空宇宙 更新时间：2023-11-03 22:17:03 25 4
gpt4 key购买 nike

我看了这篇文章，我想用更多的 div 尝试同样的技术。

以上代码适用于 2 个 div，但不适用于 4 个 div。我试图找出原因，所以我决定尝试以下代码。 

var handler = document.querySelector('.handler');
var wrapperWidth;
var wrapper = handler.closest('.wrapper');
var box = wrapper.querySelector('.box');
var isHandlerDragging = false;

document.addEventListener('mousedown', function(e) {
  // If mousedown event is fired from .handler, toggle flag to true
  if (e.target === handler) {
    isHandlerDragging = true;
  }
});

document.addEventListener('mousemove', function(e) {
  // Don't do anything if dragging flag is false
  if (!isHandlerDragging) {
    return false;
  }

  // Get offset
  var containerOffsetLeft = wrapper.offsetLeft;

  // Get x-coordinate of pointer relative to container
  var pointerRelativeXpos = e.clientX - containerOffsetLeft;
  
  // Arbitrary minimum width set on box A, otherwise its inner content will collapse to width of 0
  var boxAminWidth = 60;

  // Resize box A
  // * 8px is the left/right spacing between .handler and its inner pseudo-element
  // * Set flex-grow to 0 to prevent it from growing
  
  wrapperWidth = wrapper.stlye.width;
  
  box.style.width = (Math.max(boxAminWidth, wrapperWidth - 8)) + 'px';
  box.style.flexGrow = 0;
});

document.addEventListener('mouseup', function(e) {
  // Turn off dragging flag when user mouse is up
  isHandlerDragging = false;
});
.wrapper {
  background-color: #fff;
  color: #444;
  /* Use flexbox */
  display: flex;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  
  /* Use box-sizing so that element's outerwidth will match width property */
  box-sizing: border-box;
  
  /* Allow box to grow and shrink, and ensure they are all equally sized */
  flex: 1 1 1 1 auto;
}

.handler {
  width: 20px;
  padding: 0;
  cursor: ew-resize;
  flex: 0 0 auto;
}

.handler::before {
  content: '';
  display: block;
  width: 4px;
  height: 100%;
  background: red;
  margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="wrapper">
  <div class="box">A</div>
  <div class="handler"></div>
  <div class="box">B</div>
   <div class="handler"></div>
  <div class="box">C</div>
   <div class="handler"></div>
  <div class="box">D</div>
</div>
</body>
</html>

我想要发生的是 div 可以安排。

您可以在此处查看代码。

https://jsfiddle.net/paralaxwombat/1Lfqdb6x/

最佳答案

如果这是你想要的

var wrapper = document.querySelector('.wrapper');
var box = null;
var isHandlerDragging = false;
var boxAminWidth = 60;
var new_width = 0, current_width = 0;

document.addEventListener('mousedown', function(e) {
  // If mousedown event is fired from .handler, toggle flag to true
  if (e.target.classList.contains('handler')) {
    isHandlerDragging = true;
    box = e.target.previousElementSibling;
  }
  
});

document.addEventListener('mousemove', function(e) {
  // Don't do anything if dragging flag is false or 
  if (!isHandlerDragging) {
    return false;
  }
  
  // save the current box width
 	current_width = box.style.width;
  
  // check the minimum width
 if ((new_width = e.clientX - box.offsetLeft - 8 ) >= boxAminWidth) {
 	box.style.width = new_width + 'px';
 }
  
  // make sure the boxs dont go past the wrapper, aka: the overflow effect
  //if they do, we recover the last width of the current box to keep the boxs inside the wrapper.
  if(wrapper.lastElementChild.offsetLeft + wrapper.lastElementChild.offsetWidth > wrapper.offsetWidth) {
  box.style.width = current_width;
  }

});

document.addEventListener('mouseup', function(e) {
  // Turn off dragging flag when user mouse is up
  isHandlerDragging = false;
});
.wrapper {
  background-color: #fff;
  color: #444;
  /* Use flexbox */
  display: flex;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  
  /* Use box-sizing so that element's outerwidth will match width property */
  box-sizing: border-box;
  
  /* Allow box to grow and shrink, and ensure they are all equally sized */
  flex: 1 1 1 1 auto;
  
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   
   flex-grow: 0;
   flex-shrink: 0;
}

.handler {
  width: 20px;
  padding: 0;
  cursor: ew-resize;
  flex: 0 0 auto;
}

.handler::before {
  content: '';
  display: block;
  width: 4px;
  height: 100%;
  background: red;
  margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="wrapper">
  <div class="box">A</div>
  <div class="handler"></div>
  <div class="box">B</div>
   <div class="handler"></div>
  <div class="box">C</div>
   <div class="handler"></div>
  <div class="box">D</div>
</div>
</body>
</html>

我有一些观察:

var handler = document.querySelector('.handler');

这行代码(与 jQuery 不同)选择仅第一个 处理程序，而不是所有处理程序，因此此检查if (e.target === handler) 是仅对第一个处理程序有效，因此 mousemove 不适用于所有处理程序。同样的事情也适用于 var box = wrapper.querySelector('.box');，您将始终设置为第一个框。

这是新的 javaScript 代码

var wrapper = document.querySelector('.wrapper');
var box = null;
var isHandlerDragging = false;
var boxAminWidth = 60;
var new_width = 0, current_width = 0;

document.addEventListener('mousedown', function(e) {
  // If mousedown event is fired from .handler, toggle flag to true
  if (e.target.classList.contains('handler')) {
    isHandlerDragging = true;
    box = e.target.previousElementSibling;
  }

});

document.addEventListener('mousemove', function(e) {
  // Don't do anything if dragging flag is false or 
  if (!isHandlerDragging) {
    return false;
  }

  // save the current box width
    current_width = box.style.width;

  // check the minimum width
 if ((new_width = e.clientX - box.offsetLeft - 8 ) >= boxAminWidth) {
    box.style.width = new_width + 'px';
 }

  // make sure the boxs dont go past the wrapper, aka: the overflow effect
  //if they do, we recover the last width of the current box to keep the boxs inside the wrapper.
  if(wrapper.lastElementChild.offsetLeft + wrapper.lastElementChild.offsetWidth > wrapper.offsetWidth) {
  box.style.width = current_width;
  }

});

document.addEventListener('mouseup', function(e) {
  // Turn off dragging flag when user mouse is up
  isHandlerDragging = false;
});

在 CSS 中，我对盒子类做了一个小改动:

.box {
   /* ... */
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   flex-grow: 0;
   flex-shrink: 0;
}

关于javascript - 单击鼠标调整多个 div 的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56193479/

25 4 0
文章推荐： c# - “包含”方法返回 false
文章推荐： numpy - 计算图像中唯一颜色的数量
文章推荐： javascript - 如何在常见问题上设置个人 "Was this helpful?"调查？
文章推荐： c# - 使用程序安装安装 .NET Framework
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com