javascript – 如何创建3个可调整的div？

我想要的是：

|   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>

在这里玩它：https://jsfiddle.net/ju9zb1he/5/

解决方法

我一直在寻找一种需要不那么广泛的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).

javascript – 如何创建3个可调整的div？

解决方法

猜你在找的JavaScript相关文章