Question

我现在有两个固定长度的div，它通过动态嵌入iframe来加载外部URL。 Divs彼此相邻 - 一个在左边，另一个在右边。

截至目前，我已将其宽度修正为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>

Answer 1

有一个很棒的jQuery插件，请点击jQuery Splitter：

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

Answer 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%; }

Answer 3

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
将事件监听器附加到mouseup上的document
- 将isDragging设为false

Answer 4

使用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/

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

4 个答案: