Как сделать div resizer с чистым JAvaScript - PullRequest
Новая
       0

Как сделать div resizer с чистым JAvaScript

1 голос
/ 31 марта 2020

Я пытаюсь создать 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>

1 Ответ

1 голос
/ 31 марта 2020

Вот самый простой способ сделать это, используя 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...