我想要的是：
| 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 = $('#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,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>
解决方法
我一直在寻找一种需要不那么广泛的CSS的解决方案.它确实有一个小错误(FIXED),但希望这可以让你开始.这是一个
DEMO.
此外,我的目标是像.next()和.prev()一样使用DOM Traversal methods,因为它不会如此依赖属性,并且如果你在页面上多次需要这样的功能,它将很容易重复使用.
编辑 – 进一步说明
这里的想法是onClick一个.handle我们想要收集相对于DOM中.handle的.prev()和.next()div的总宽度(var tWidth).然后我们可以使用起始鼠标位置(var sPos)来减去我们移动鼠标的像素数量(e.pageX).这样做可以为我们提供.prev()div在mousemove上应具有的正确宽度.要获得.next()div的宽度,我们只需要从我们存储在.handle上的总宽度(var tWidth)中减去.prev()div的宽度.希望这可以帮助！如果您有任何其他问题,请告诉我,但直到明天我才可能无法使用.
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,#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
}
});
编辑
这个错误是由两件事引起的.
1)在鼠标移动时,我们将总宽度除以2,而不是更新的鼠标偏移量.
2)sPos没有在mousemove上更新,并且基于点击位置保留了静态数字.
解析度
在鼠标移动时更新sPos,使鼠标偏移准确地基于上一个鼠标移动位置,而不是点击位置.完成后,我们可以从总宽度中减去.next()div的宽度.然后我们从剩余的宽度中减去当前鼠标的位置. fiddle也已更新.
$('.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;
}
});
编辑
在mousemove上添加了一个附加条件,以防止拖动超过总宽度(var tWidth).
