如何使用纯 JAvaScript 制作 div resizer

Question

I am trying to create a div resizer and due to some restrictions, I cannot use jQuery and I am forced to use pure JavaScript for that.我正在尝试创建一个 div resizer，但由于某些限制，我无法使用 jQuery，因此我被迫使用纯 JavaScript。 In the current state, it works, but it breaks if the div that will have the slider does not have the position set to absolute.在当前状态下，它可以工作，但是如果将具有滑块的 div 没有将位置设置为绝对位置，它就会中断。 Is there a way to solve that issue?有没有办法解决这个问题？ Thank you very much.非常感谢。

I am a student learning to write JavaScript/CSS/HTML code and so I am relatively new to this.我是一名学习编写 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 - ex; m_pos = ex; 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 = ex; 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>

Answer 1

Here is the simplest way you can do it using CSS if that is not an issue here no need to use JS for this feature, it is just an example but it definitely help you on your way.如果这不是问题，这里是使用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>

Here is it in Javascript:这是在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>

如何使用纯 JAvaScript 制作 div resizer

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-03-31 08:10:14

如何使用纯 JAvaScript 制作 div resizer

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-03-31 08:10:14

解决方案1
1 已采纳 2020-03-31 08:10:14