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

Posted 2023-05-08

技术标签:

【中文标题】使用可拖动事件增加 div 的宽度，并排显示【英文标题】：Increase width of divs, displayed side by side, using draggable events 【发布时间】：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 给出的答案可以达到我想的效果。 【参考方案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

mousedown

isDragging

true

lastPageX