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

coder 2023-08-08 原文

我想要的:

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

最佳答案

我一直在寻找一种不需要大量 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)。

关于javascript - 如何创建 3 个可调整的 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32655215/

可调 javascript code handle width jquery html css

有关javascript - 如何创建 3 个可调整的 div？的更多相关文章

ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2
我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div
ruby - 如何从 ruby 中的字符串运行任意对象方法？ - 2
总的来说，我对ruby还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用
ruby - 如何在 Ruby 中顺序创建 PI - 2
出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits
python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2
关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。
ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2
给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？最佳答案在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru
ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2
我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚
ruby - 如何指定 Rack 处理程序 - 2
Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack
ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2
使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？最佳答案你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta
ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2
在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。最佳答案这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

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

有关javascript - 如何创建 3 个可调整的 div？的更多相关文章

随机推荐