时间戳

首页 > 解决方案 > 如何使用纯 JAvaScript 制作 div resizer

javascript - 如何使用纯 JAvaScript 制作 div resizer

问题描述

我正在尝试创建一个 div resizer，由于一些限制，我不能使用 jQuery，我不得不为此使用纯 JavaScript。在当前状态下，它可以工作，但是如果将具有滑块的 div 没有将位置设置为绝对位置，它就会中断。有没有办法解决这个问题？非常感谢。

我是一名学习编写 JavaScript/CSS/HTML 代码的学生，所以我对此比较陌生。

const BORDER_SIZE = 4;
const panel = document.getElementById("left_panel");
const StationaryPanel = document.getElementById("right_panel");
const parent = document.getElementById("parent");

const label1 = document.getElementById("lb1");
const label2 = document.getElementById("lb2");
const label3 = document.getElementById("lb3");

let m_pos;

function resize(e) {
  const dx = m_pos - e.x;
  m_pos = e.x;

  lb1.innerHTML = panel.offsetWidth;
  lb2.innerHTML = StationaryPanel.offsetWidth;
  lb3.innerHTML = parent.offsetWidth;
  //lb3.innerHTML = document.body.clientWidth;

  panel.style.width = (parseInt(getComputedStyle(panel, '').width) + dx) + "px";
  StationaryPanel.style.width = (parent.offsetWidth - panel.offsetWidth) + "px";
  //StationaryPanel.style.width = (document.body.clientWidth - panel.offsetWidth) + "px";
}

panel.addEventListener("mousedown", function(e) {
  if (e.offsetX < BORDER_SIZE) {
    m_pos = e.x;
    if (panel.style.width < panel.minWidth || panel.style.width > panel.maxWidth) {
      return;
    }
    document.addEventListener("mousemove", resize, false);
  }
}, false);

document.addEventListener("mouseup", function() {
  document.removeEventListener("mousemove", resize, false);
}, false);
#left_panel {
  position: absolute;
  width: 96px;
  min-width: 50px;
  max-width: 500px;
  padding-left: 4px;
  height: 100%;
  right: 0;
  background-color: #f0f0ff;
}

#left_panel::before {
  content: " ";
  background-color: #ccc;
  position: absolute;
  left: 0;
  width: 4px;
  height: 100%;
  cursor: w-resize;
}

#right_panel {
  width: 1000px;
  height: 100%;
  background-color: #ff0000;
}

#parent {
  width: 800px;
}
<body>
  <div id="parent">
    <div id="left_panel">
      This is the left div, the one that moves
    </div>
    <div id="right_panel">
      This is the right div, the one that stays the same
    </div>
  </div>


  <p id="lb1"></p>
  <p>This is the left panel width ^</p>
  <p id="lb2"></p>
  <p>This is the right panel width ^</p>
  <p id="lb3"></p>
  <p>This is the parent width ^</p>
</body>

标签： javascripthtmlcss

解决方案

如果这不是问题，这是您可以使用的最简单的方法CSS，这里不需要使用 JS 来实现此功能，这只是一个示例，但它绝对可以帮助您。

#MainDiv {
  display: flex;
  flex-direction: row;
  height: 200px;
  width: 400px;
  border: 1px solid red;
  position: relative;
}

#leftDiv {
  width: 200px;
  border: 1px solid yellow;
}

#rightDiv {
  border: 2px solid;
  padding: 20px;
  width: 300px;
  /* you can make this vertical/auto to make resize both ways */
  resize: horizontal;
  overflow: auto;
}
<div id="MainDiv">
  <div id="leftDiv">
    Left Div
  </div>
  <div id="rightDiv">
    Right Div
  </div>
</div>

这是Javascript中的：

var h = $('#handle'),
  l = $('#left'),
  r = $('#right'),
  w = $('body').width() - 18;

var isDragging = false;

h.mousedown(function(e) {
  isDragging = true;
  e.preventDefault();
});
$(document).mouseup(function() {
  isDragging = false;
}).mousemove(function(e) {
  if (isDragging) {
    l.css('width', e.pageX);
    r.css('width', w - e.pageX);
  }
});
#left,
#right {
  border: 1px solid #aaa;
  float: left;
  height: 100px;
  width: 48%;
}

#handle {
  background: #000;
  float: left;
  height: 100px;
  margin: 1px;
  /* Slider width */
  width: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="left"> Left</div>
<div id="handle"></div>
<div id="right">Right</div>

推荐阅读