Question

我想要的是什么：

  |   A   | |   B   | |   C   |
           ^         ^

当您移动handles左右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的解决方案。它确实有一个小错误（ FIXED ），但希望这可以让你开始。这是DEMO。

此外，我的目标是使用DOM Traversal methods .next()和.prev()这样的方式，它不会如此依赖属性，并且如果你多次需要这样的功能，它将很容易重复使用在页面上。

修改 - 进一步说明

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

<强> HTML

.handle

<强> CSS

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

<强>的jQuery

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

修改

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

1）在鼠标移动时，我们将总宽度除以2，而不是更新的鼠标偏移。

2）sPos没有在mousemove上更新，并且基于点击位置保留了一个静态数字。

解决

在鼠标移动时更新sPos，使鼠标偏移准确地基于上一个鼠标移动位置，而不是点击位置。完成后，我们可以从总宽度中减去.next（）div的宽度。然后我们从剩余的宽度中减去当前鼠标的位置。 fiddle也已更新。

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

修改

在mousemove上添加了一个附加条件，以防止拖动超过总宽度（var tWidth）。

Answer 2

你能解释一下你想要完成的事吗？

我不相信你需要使用位置：绝对。绝对定位的前提是覆盖其父元素对元素施加的边距和填充。

您不需要这样做，默认情况下所有元素都具有相对定位，这使得它们相互推动并且不允许重叠。

我可能错过了一些东西，但我认为除了一些非常基本的CSS之外，这只是你想要的东西：http://jsfiddle.net/3bdoazpk/

<div class='first'>
    asdf
</div><div class='second'>
    dasdf
</div><div class='third'>
    sadf
</div>

body {
    margin: 0;
}

div {
    display: inline-block;
    height: 100%;
}

.first, .third {
    width: 40%;
}

.first {
    background-color: red;
}

.second {
    background-color: blue;
    width: 20%;
}

.third {
    background-color: green;
}

你如何创建3个可调节的div？

2 个答案: