使用可拖动事件增加 div 的宽度，并排显示答案

【问题标题】：Increase width of divs, displayed side by side, using draggable events使用可拖动事件增加 div 的宽度，并排显示
【发布时间】：2013-11-11 05:57:38
【问题描述】：

到目前为止，我有两个固定长度的 div，它们通过在其中动态嵌入 iframe 来加载外部 URL。 div 彼此相邻出现 - 一个在左侧，另一个在右侧。

到目前为止，我已将它们的宽度固定为50%。但是，我想让用户灵活地增加任何 div 的宽度，以便轻松查看内部的 URL without scrolling horizontally。就像根据他的需要将分隔两个 div 的边框向左或向右拖动。

有没有办法实现这一点？请推荐任何图书馆或其他东西。

我浏览了一个用于图像的库twentytwenty。我不知道这对动态 iframe 有什么作用。

这是显示 div 的 JSFiddle。

<div>
    <div id="originalPage" style="width:54%;height: 730px;float:left">  
        <p>one div </p>
    </div>
    <div id="diffReport" style="width:45%; height: 730px;float:right">
        <p>another div</p>
    </div>
</div>

【问题讨论】：

我不得不承认现在对我来说工作量太大了，但是我建议您创建 CSS 以在悬停中心区域时更改光标。然后，为 mousedown/mouseclick 附加处理程序。然后，当用户移动鼠标时，您比较鼠标位置并设置 div 的新宽度。听起来像一个计划..？
是的。我也在同一个方向思考。 @Linus 给出的答案可以达到我想的效果。

标签： javascript jquery html css iframe

【解决方案1】：

有一个很棒的 jQuery 插件，在这里使用 jQuery Splitter：

http://jquery.jcubic.pl/splitter.php

【讨论】：

【解决方案2】：

<div>
    <div class="resizable" id="originalPage" style="width:54%;height: 730px;float:left">  
        <p>one div </p>
    </div>
    <div class="resizable" id="diffReport" style="width:45%; height: 730px;float:right">
                <p>another div</p>
    </div>
</div>

$(function() {$( ".resizable" ).resizable({animate: true,animateEasing:'swing',imateDuration: 500
});});

#diffReport, #originalPage{
        border: 1px solid;
}
.ui-resizable-helper { border: 1px dotted gray; }
.resizable { display: block; width: 400px; height: 400px; padding: 30px; border: 2px solid     gray; overflow: hidden; position: relative; }
#diffReport { width: 100%; height: 100%; }
#originalPage { width: 100%; height: 100%; }

【讨论】：

稍微调整一下#diffReport 和#original 的CSS 宽度和高度，以达到您想要的效果。让我知道是否可以。
这有点用，但是在增加左 div 的宽度的同时，右一个会下降。并且没有通过拖动用户理想需要的左边框来增加右宽度的选项。可拖动事件是可以的，但我们需要，如果我们拖动一个 div，其他的大小应该自动减小，这样它就不会低于。
嗯，是的，因为两者都有相同的类（我的错），所以它们都被调整大小。改变那个。目前无法为您提供更多帮助：/

【解决方案3】：

使用 jQuery UI 库来调整大小/拖动。

HTML

<div id="demo"></div>

脚本

    <script>
    $(function(){$('#demo').draggable().resizable();});

    $('#demo')
        .resizable({
            start: function(e, ui) {
                alert('resizing started');
            },
            resize: function(e, ui) {

            },
            stop: function(e, ui) {
                alert('resizing stopped');
            }
        });
</script>

小提琴是

http://jsfiddle.net/VuqbN/

更新了你的小提琴

http://jsfiddle.net/vw9qt/1/

【讨论】：

【解决方案4】：

var isDragging = false
var lastPageX = null
在现有 div 中间创建一个新 div。
将事件侦听器附加到该 div 上的 mousedown。
- 将isDragging 设置为true 和lastPageX 设置为event.pageX
将事件侦听器附加到封闭 div 上的 mousemove。
- 仅在isDragging 时运行
- var diff event.pageX - lastPageX
- 将diff添加到左侧可调整大小的div
- 从右侧可调整大小的 div 中删除 diff
- 将lastPageX 设置为event.pageX
在document 上将事件侦听器附加到mouseup
- 将isDragging 设置为false

【讨论】：

add/remove that value to the two resizable divs ，无法理解这一点。