如何创建3个可调整的div？ [英] How do you create 3 adjustable divs?
问题描述
我想要的：
| A | | B | | C |
^ ^
移动句柄左右 A ， B 和 C 相应地调整大小
| A | | B | | C |
我所拥有的是 || B 和 C 滑动，但不调整 B 我得到另一个是调整大小的光标。基本上 C 是一个窗帘，涵盖 A 和 B 。我没有得到最小尺寸为 C 工作。
A | C |
我打破了别人的完美代码来实现这个目的：
var isResizing = false，who =''，lastDownX = 0; $（function（）{var container = $（'＃container'），left = $ '），right = $（'＃right'），middle = $（'＃middle'），hand2 = $（'＃hand2'），handle = $（'＃handle'）; handle.on（'mousedown' ，function（e）{isResizing = true; who = e.target.id; lastDownX = e.clientX;}）; $（document）.on（'mousemove'，function（e）{var temp，min;我们不想做任何事情，如果我们不调整大小if（！isResizing）return; min = container.width（）* 0.1; temp = container.width（） - （e.clientX - container.offset .left）; if（temp
body，html {width：100％;高度：100％; margin：0; padding：0;}＃container {width：100％;高度：100％; / *禁用选择，所以它不会恼人，当拖动。 * / -webkit-touch-callout：none; -webkit-user-select：none; -khtml-user-select：none; -moz-user-select：moz-none; -ms-user-select：none; user-select：none;}＃container #left {width：40％;高度：100％; float：left; background：red;}＃container #middle {margin-left：40％;高度：100％; background：green;}＃container #right {position：absolute; right：0; top：0; bottom：0; width：200px; background：rgba（0，0，255，0.90）;}＃container #handle {position：absolute; left：-4px; top：0; bottom：0; width：80px; cursor：w-resize;}＃container＃hand2 {position：absolute;左：39％; top：0; bottom：0; width：80px; cursor：w-resize;}
< div id = container> <！ - 左侧 - > < div id =left>这是左侧的内容！< / div> <！ - middle - > < div id =middle> < div id =hand2>< / div>这是中间的内容！ < / div> <！ - 右侧 - > < div id =right> <！ - Actual resize handle - > < div id =handle>< / div>这是右侧的内容！ < / div>< / div>
在这里： https://jsfiddle.net/ju9zb1he/5/
我在寻找一个需要不太广泛的CSS的解决方案。它有一个小错误（ FIXED ），但希望这应该让你开始。这是一个 DEMO 。
我也打算使用 DOM遍历方法，例如 .next（） 和 .prev（）的方式，它不会是这样的属性依赖，并将很容易重复使用，如果你
p>这里的想法是
onClick 的一个 .handle 我们要收集的总宽度（var tWidth） .prev（）和 .next（） divs相对于 .handle 。然后我们可以使用开始鼠标位置（var sPos）来减去我们移动鼠标的像素量（e.pageX）。这样做可以使 .prev（） div在 mousemove 上具有正确的宽度。要获得 .next（） div的宽度，我们只需要减去 .prev（） div从 .handle 中存储的 onClick 的总宽度（var tWidth）希望这可以帮助！ < div class =container>
< div id =left>< / div>
< div id =l-handleclass =handle>< / div>
< div id =middle>< / div>
< div id =r-handleclass =handle>< / div>
< div id =right>< / div>
< / div>
CSS
#left，#middle，＃right {
display：inline-block;
background：＃e5e5e5;
min-height：200px;
margin：0px;
}
＃l-handle，＃r-handle {
display：inline-block;
background：＃000;
width：2px;
min-height：200px;
cursor：col-resize;
margin：0px;
}
jQuery
var isDragging = false，
cWidth = $（'。container'）。width（），
sPos，
，
tWidth;
$（'＃left，#middle，#right'）。width（（CWidth / 3） - 7）; //设置内容部分的初始宽度
$（'。handle'）。on（'mousedown'，function（e）{
isDragging = true;
sPos = e.pageX;
handle = $（this）;
tWidth = handle.prev（）。width（）+ handle.next（）。width（）;
}）;
$（window）.on（'mouseup'，function（e）{
isDragging = false;
}
$（'。container'）。on（'mousemove'，function（e）{
if（isDragging）{//在下面添加一个附加条件
var cPos = sPos-e.pageX;
handle.prev（）。width（（tWidth / 2） - cPos）; //这是错误的一部分...
handle.next（）。width （tWidth - handle.prev（）。width（））;
//在下面的sPos中添加更新
}
}）;
编辑
1）在mousemove中，我们将总宽度除以2，而不是更新的鼠标偏移量。
2）sPos没有在mousemove上更新，并根据点击位置保持一个静态数字。
更新mousemove上的sPos，即鼠标偏移精确地基于上一个鼠标移动位置而不是点击位置。完成后，我们可以从总宽度中减去.next（）div的宽度。然后我们从剩余宽度中减去当前鼠标位置。 小提示也已更新。
$（'。container'）。on（'mousemove'，function（e）{
var cPos = sPos - e.pageX;
if（isDragging&& tWidth - handle.next（）。width（）） - cPos）<= tWidth）{
handle.prev（）。width（（tWidth - handle.next（）。
handle.next（）。width（tWidth - handle.prev（）。width（））;
sPos = e.pageX;
}
}）;
编辑
在mousemove上添加了一个附加条件，以防止拖动超过总宽度（var tWidth）。
What I want:
| A | | B | | C |
^ ^
When you move the handles left and right A, B, and C resize accordingly
| A | | B | | C |
What I have is the || between B and C sliding, but not resizing B and all I get on the other one is the resize cursor. Basically C is a curtain and covers A and B. I did get min size working for C.
| A | C |
I broke somebody else's perfectly good code to get this far:
var isResizing = false,
who='',
lastDownX = 0;
$(function () {
var container = $('#container'),
left = $('#left'),
right = $('#right'),
middle = $('#middle'),
hand2 = $('#hand2'),
handle = $('#handle');
handle.on('mousedown', function (e) {
isResizing = true;
who=e.target.id;
lastDownX = e.clientX;
});
$(document).on('mousemove', function (e) {
var temp, min;
// we don't want to do anything if we aren't resizing.
if (!isResizing)
return;
min=container.width() * 0.1;
temp = container.width() - (e.clientX - container.offset().left);
if (temp < min)
temp = min;
if (who == 'handle')
right.css('width', temp);
if (who == 'hand2')
left.css('width', temp);
}).on('mouseup', function (e) {
// stop resizing
isResizing = false;
});
});
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
/* Disable selection so it doesn't get annoying when dragging. */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: moz-none;
-ms-user-select: none;
user-select: none;
}
#container #left {
width: 40%;
height: 100%;
float: left;
background: red;
}
#container #middle {
margin-left: 40%;
height: 100%;
background: green;
}
#container #right {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 200px;
background: rgba(0, 0, 255, 0.90);
}
#container #handle {
position: absolute;
left: -4px;
top: 0;
bottom: 0;
width: 80px;
cursor: w-resize;
}
#container #hand2 {
position: absolute;
left: 39%;
top: 0;
bottom: 0;
width: 80px;
cursor: w-resize;
}
<div id="container">
<!-- Left side -->
<div id="left"> This is the left side's content!</div>
<!-- middle -->
<div id="middle">
<div id="hand2"></div> This is the middle content!
</div>
<!-- Right side -->
<div id="right">
<!-- Actual resize handle -->
<div id="handle"></div> This is the right side's content!
</div>
</div>
Been playing with it here: https://jsfiddle.net/ju9zb1he/5/
I was looking for a solution that required less extensive CSS. It does have one minor bug(FIXED), but hopefully this should get you started. Here is a DEMO.
Also I aimed to use DOM Traversal methods like .next() and .prev() that way it wouldn't be so attribute dependent, and would be easily reusable if you needed a feature like this multiple times on a page.
Edit - Further Explanation
The idea here is onClick of a .handle we want to gather the total width (var tWidth) of the .prev() and .next() divs relative to the .handle in the DOM. We can then use the start mouse position (var sPos) to substract the amount of pixels we've moved our mouse (e.pageX). Doing so gives us the correct width that the .prev() div should have on mousemove. To get the width of the .next() div we need only to subtract the width of the .prev() div from the total width (var tWidth) that we stored onClick of the .handle. Hope this helps! Let me know if you have any further questions, however I will likely be unavailable till tomorrow.
HTML
<div class="container">
<div id="left"></div>
<div id="l-handle" class="handle"></div>
<div id="middle"></div>
<div id="r-handle" class="handle"></div>
<div id="right"></div>
</div>
CSS
#left, #middle, #right {
display: inline-block;
background: #e5e5e5;
min-height: 200px;
margin: 0px;
}
#l-handle, #r-handle {
display: inline-block;
background: #000;
width: 2px;
min-height: 200px;
cursor: col-resize;
margin: 0px;
}
jQuery
var isDragging = false,
cWidth = $('.container').width(),
sPos,
handle,
tWidth;
$('#left, #middle, #right').width((cWidth / 3) - 7); // Set the initial width of content sections
$('.handle').on('mousedown', function(e){
isDragging = true;
sPos = e.pageX;
handle = $(this);
tWidth = handle.prev().width() + handle.next().width();
});
$(window).on('mouseup', function(e){
isDragging = false;
});
$('.container').on('mousemove', function(e){
if(isDragging){ // Added an additional condition here below
var cPos = sPos - e.pageX;
handle.prev().width((tWidth / 2) - cPos); // This was part of the bug...
handle.next().width(tWidth - handle.prev().width());
// Added an update to sPos here below
}
});
Edit
The bug was caused by 2 things.
1) On mousemove we were dividing the total width by two, instead of an updated mouse offset.
2) The sPos was not updating on mousemove, and stayed a static number based off of the click location.
Resolution
Update the sPos on mousemove that way the mouse offset is accurately based off of the previous mousemove position, rather than the click position. When this is done we can then subtract the .next() div's width from the total width. Then we subtract our current mouse position from the remaining width. The fiddle has been updated as well.
$('.container').on('mousemove', function(e){
var cPos = sPos - e.pageX;
if(isDragging && ((tWidth - handle.next().width()) - cPos) <= tWidth){
handle.prev().width((tWidth - handle.next().width()) - cPos);
handle.next().width(tWidth - handle.prev().width());
sPos = e.pageX;
}
});
Edit
Added an additional condition on mousemove to prevent the drag from exceeding the total width (var tWidth).
这篇关于如何创建3个可调整的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
