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

Question

我想要的:

  |   A   | |   B   | |   C   |
           ^         ^

当您左右移动 handle 时，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, 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/

Answer 1

我一直在寻找一种不需要大量 CSS 的解决方案。它确实有一个小错误(已修复)，但希望这能让您入门。这是一个DEMO .

我还打算使用 DOM Traversal methods喜欢.next()和 .prev()这样它就不会如此依赖于属性，并且如果您在一个页面上多次需要这样的功能，它可以很容易地重用。

编辑 - 进一步说明

这里的想法是 .handle 的 onClick 我们想要收集 .prev() 的总宽度 (var tWidth)和 .next() div 相对于 DOM 中的 .handle。然后我们可以使用开始鼠标位置 (var sPos) 减去我们移动鼠标 (e.pageX) 的像素数量。这样做为我们提供了 .prev() div 在 mousemove 上应具有的正确宽度。要获得 .next() div 的宽度，我们只需要从我们存储的总宽度 (var tWidth) 中减去 .prev() div 的宽度.handle 的onClick。希望这可以帮助!如果您有任何其他问题，请告诉我，但我可能要到明天才有空。

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
    }
});

编辑

这个错误是由两件事引起的。

1) 在 mousemove 上，我们将总宽度除以二，而不是更新鼠标偏移量。

2) sPos 没有在 mousemove 上更新，而是根据点击位置保持一个静态数字。

分辨率

更新 mousemove 上的 sPos，使鼠标偏移准确地基于先前的 mousemove 位置，而不是单击位置。完成后，我们可以从总宽度中减去 .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)。