javascript - Jquery UI 可拖动不会调整其他 DIV 的大小

coder 2024-07-14 原文

In this plunk我有三个 DIV 除以另外两个可拖动(灰色)的 DIV。当可拖动的 DIV 被向上/向下或向左/向右拖动时，其他 DIV 应该调整大小。

第一个可拖动的 DIV 工作正常(左侧的那个可以垂直调整其他 DIV 的大小)。但是第二个可拖动的 DIV 不起作用，即使方法与第一个可拖动的 DIV 相同。有什么解决办法吗？

Javascript

    var top1H, bottom1H;
      $( "#div1" ).draggable({
          axis: "y",
          start: function(event, ui) {
            shiftInitial = ui.position.top;
              top1H = $("#top1").height();
              bottom1H = $("#bottom1").height();
            },
          drag: function(event,ui) {
              var shift = ui.position.top;
              $("#top1").height(top1H + shift - shiftInitial);
              $("#bottom1").height(bottom1H - shift + shiftInitial);
            }
        });

    var right1W, left1W;
  $( "#div2" ).draggable({
          axis: "y",
          start: function(event, ui) {
            shiftInitial = ui.position.left;
              right1W = $("#right1").height();
              left1W = $("#left1").height();
            },
          drag: function(event,ui) {
              var shift = ui.position.left;
              $("#right1").height(right1W + shift - shiftInitial);
              $("#left1").height(left1W - shift + shiftInitial);
            }
        });

HTML

<div>
    <div id="left1">
    <div id="top1"></div>
    <div id="div1"></div>
    <div id="bottom1"></div>
  </div>
   <div id="div2"></div>
   <div id="right1"></div>
</div>

CSS

#div1 { 
  width:180px;
  height:6px;
  background-color:#e0e0e0;
  cursor:ns-resize;
  position: absolute;
}
#div2{
  width:6px;
  height:200px;
  background-color:#e0e0e0;
  float:left;
  cursor:ew-resize;
}
#top1{
  width:180px;
  height:100px;
  background-color:orange;
}
#bottom1 {
  width:180px;
  height:100px;
  background-color:blue;
}
#left1{
  width:180px;
  height:200px;
  float:left;
  background-color:orange;
}
#right1{
  height:200px;
  background-color:red;
  width:100%;
}

最佳答案

既然你提到你第一个可拖动的 DIV 工作正常，我只修复了第二个。

您的代码有两个问题:

您为两个可拖动元素赋予了 axis: "y" 属性(而第二个元素应该在 X 轴上渐变。
第二次拖动的变化应该是宽度(而不是高度)。

$(function() {
        var top1H, bottom1H;
        var right1W, left1W;
        
        $( "#div1" ).draggable({
            axis: "y",
            start: function(event, ui) {
                shiftInitial = ui.position.top;
                top1H = $("#top1").height();
                bottom1H = $("#bottom1").height();
            },
            drag: function(event,ui) {
                var shift = ui.position.top;
                $("#top1").height(top1H + shift - shiftInitial);
                $("#bottom1").height(bottom1H - shift + shiftInitial);
            }
        });
        $( "#div2" ).draggable({
            axis: "x",
            start: function(event, ui) {
                shiftInitial = ui.position.left;
                right1W = $("#right1").width();
                left1W = $("#left1").width();
            },
            drag: function(event,ui) {
                var shift = ui.position.left;
                $("#left1 div").width(left1W + shift);
            }
        });
    });

#div1 { 
  width:180px;
  height:6px;
  background-color:#e0e0e0;
  cursor:ns-resize;
  position: absolute;
}
#div2{
  width:6px;
  height:200px;
  background-color:#e0e0e0;
  float:left;
  cursor:ew-resize;
  left: 180px;
}
#top1{
  width:180px;
  height:100px;
  background-color:orange;
}
#bottom1 {
  width:180px;
  height:100px;
  background-color:blue;
}
#left1{
  width:0;
  height:200px;
  float:left;
  background-color:orange;
}
#right1{
  height:200px;
  background-color:red;
  width:100%;
}

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>

<div>
  <div id="left1">
    <div id="top1"></div>
    <div id="div1"></div>
    <div id="bottom1"></div>
  </div>
  <div id="div2"></div>
  <div id="right1"></div>
</div>

Note that the code will NOT work if you drag the borders "outside" of the current block. To do so you will also need to check if the new width/height is bigger than the original and change all the elements accordingly.

更新 - 允许更改“红色”框的高度

(最好以“全页”模式查看)

$(function() {
  var minHeight = $('#right1').height();
  var top1H, bottom1H;
  var right1W, left1W;

  $( "#div1" ).draggable({
    axis: "y",
    start: function(event, ui) {
      shiftInitial = ui.position.top;
      top1H = $("#top1").height();
      bottom1H = $("#bottom1").height();
    },
    drag: function(event,ui) {
      var shift = ui.position.top;
      $("#top1").height(top1H + shift - shiftInitial);
      $("#bottom1").height(bottom1H - shift + shiftInitial);
      $('#right1,#div2').height(Math.max(
        minHeight,
        Math.max(
          $('#top1').height()+$('#div1').height(),
          $('#top1').height()+$('#bottom1').height()
        )));
    }
  });
  $( "#div2" ).draggable({
    axis: "x",
    start: function(event, ui) {
      shiftInitial = ui.position.left;
      right1W = $("#right1").width();
      left1W = $("#left1").width();
    },
    drag: function(event,ui) {
      var shift = ui.position.left;
      //$("#right1").width(right1W - shift + shiftInitial);
      $("#left1 div").width(left1W + shift);
    }
  });
});

#div1 { 
  width:180px;
  height:6px;
  background-color:#e0e0e0;
  cursor:ns-resize;
  position: absolute;
}
#div2{
  width:6px;
  height:200px;
  background-color:#e0e0e0;
  float:left;
  cursor:ew-resize;
  left: 180px;
}
#top1{
  width:180px;
  height:100px;
  background-color:orange;
}
#bottom1 {
  width:180px;
  height:100px;
  background-color:blue;
}
#left1{
  width:0;
  height:200px;
  float:left;
  background-color:orange;
}
#right1{
  height:200px;
  background-color:red;
  width:100%;
}

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<div>
  <div id="left1">
    <div id="top1"></div>
    <div id="div1"></div>
    <div id="bottom1"></div>
  </div>
  <div id="div2"></div>
  <div id="right1"></div>
</div>

This version will not give you the option to "lower" the height of your blocks once the height changed.

关于javascript - Jquery UI 可拖动不会调整其他 DIV 的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38289204/

javascript Jquery 34 height div css jquery-ui

有关javascript - Jquery UI 可拖动不会调整其他 DIV 的大小的更多相关文章

ruby - 其他文件中的 Rake 任务 - 2
我试图在一个项目中使用rake，如果我把所有东西都放到Rakefile中，它会很大并且很难读取/找到东西，所以我试着将每个命名空间放在lib/rake中它自己的文件中，我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题，但没有任务。我现在只有一个.rake文件作为测试，名为“servers.rake”，它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时
ruby-on-rails - 在 Rails 中将文件大小字符串转换为等效千字节 - 2
我的目标是转换表单输入，例如“100兆字节”或“1GB”，并将其转换为我可以存储在数据库中的文件大小(以千字节为单位)。目前，我有这个:defquota_convert@regex=/([0-9]+)(.*)s/@sizes=%w{kilobytemegabytegigabyte}m=self.quota.match(@regex)if@sizes.include?m[2]eval("self.quota=#{m[1]}.#{m[2]}")endend这有效，但前提是输入是倍数(“gigabytes”，而不是“gigabyte”)并且由于使用了eval看起来疯狂不安全。所以，功能正常，
ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2
我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚
ruby - Highline 询问方法不会使用同一行 - 2
设置:狂欢ruby1.9.2高线(1.6.13)描述:我已经相当习惯在其他一些项目中使用highline，但已经有几个月没有使用它了。现在，在Ruby1.9.2上全新安装时，它似乎不允许在同一行回答提示。所以以前我会看到类似的东西:require"highline/import"ask"Whatisyourfavoritecolor?"并得到:Whatisyourfavoritecolor?|现在我看到类似的东西:Whatisyourfavoritecolor?|竖线(|)符号是我的终端光标。知道为什么会发生这种变化吗？最佳答案
ruby-on-rails - 项目升级后 Pow 不会更改 ruby 版本 - 2
我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘
ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2
我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll
ruby - 调用其他方法的 TDD 方法的正确方法 - 2
我需要一些关于TDD概念的帮助。假设我有以下代码defexecute(command)casecommandwhen"c"create_new_characterwhen"i"display_inventoryendenddefcreate_new_character#dostufftocreatenewcharacterenddefdisplay_inventory#dostufftodisplayinventoryend现在我不确定要为什么编写单元测试。如果我为execute方法编写单元测试，那不是几乎涵盖了我对create_new_character和display_invent
java - 我的模型类或其他类中应该有逻辑吗 - 2
我只想对我一直在思考的这个问题有其他意见，例如我有classuser_controller和classuserclassUserattr_accessor:name,:usernameendclassUserController//dosomethingaboutanythingaboutusersend问题是我的User类中是否应该有逻辑user=User.newuser.do_something(user1)oritshouldbeuser_controller=UserController.newuser_controller.do_something(user1,user2)我
HBase Region 简介和建议数量&大小 - 2
Region是HBase数据管理的基本单位,region有一点像关系型数据的分区。region中存储这用户的真实数据，而为了管理这些数据，HBase使用了RegionSever来管理region。Region的结构hbaseregion的大小设置默认情况下，每个Table起初只有一个Region，随着数据的不断写入，Region会自动进行拆分。刚拆分时，两个子Region都位于当前的RegionServer，但处于负载均衡的考虑，HMaster有可能会将某个Region转移给其他的RegionServer。RegionSplit时机：当1个region中的某个Store下所有StoreFile
ruby - 如何使用 Selenium Webdriver 根据 div 的内容执行操作？ - 2
我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption

javascript - Jquery UI 可拖动不会调整其他 DIV 的大小

更新 - 允许更改“红色”框的高度

有关javascript - Jquery UI 可拖动不会调整其他 DIV 的大小的更多相关文章

随机推荐