javascript - 如何在调整大小期间获取面板的大小？

Question

我有一个多面板 jQuery 布局，并且想在调整大小时知道内部中心面板的大小。document.ready 函数如下所示：

$(document).ready(function () { 

    outerLayout = $('body').layout({ 
        spacing_open:           8
    ,   south__spacing_open:    4 
    ,   north__minSize:         40
    ,   north__maxSize:         200
    ,   center__onresize:       resizeInnerLayout
    ,   resizeWhileDragging:    true
    ,   triggerEventsWhileDragging: true
    }); 

这是 resizeInnerLayout 函数：

function resizeInnerLayout() {
    var width=$('#content-middle').width();
    var height = $('#content-middle').height();
    console.log("content-middle size = ("+width +"," +height +")");
};

这是html：

<div id="content-middle" class="inner-center">
    <svg></svg>
</div> 

Javascript 在 svg 中放置了一个 d3 图表。我需要知道 div 的大小，因为当用户滑动分隔条时它会调整大小，以便我可以相应地调整图表的大小。目前，console.log 没有输出任何内容。

我还尝试将函数绑定到 layoutpaneresize 事件，如下所示：

$('.inner-center').bind('layoutpaneresize', function(paneName, $pane, paneState, paneOptions) {
        console.log("content-middle size = ("+paneState.width +"," +paneState.height +")");     
    });

但它也没有输出。这也没有：

$('.inner_center').resize(function() {
    console.log("content-middle is being resized");
});

这一个有效，但只有在调整浏览器窗口大小时才有效，而不是在调整窗口内的拆分器大小时。即使这样，它也会在您开始调整大小时报告大小，但不会随着大小继续变化而更新。

window.addEventListener("resize", drawChart);

有任何想法吗？

Answer 1

我从 Maytha8 和上面的帖子中获取了以下代码。
除了我的显示宽度和高度而不是左右。
我希望这可以帮助其他人。
谢谢， Maytha8

韦恩

$("div#1").resizable({
  handles: 'e',
  minWidth: 0,
  minHeight: $("body").height(),
  maxWidth: $("body").width(),
  maxHeight: $("body").height(),
  resize: function(event, ui) {
  var left = Math.round(((ui.size.width / $("body").width()) * 100));
  var right = Math.round((100 - ((ui.size.width / $("body").width()) * 100)));
  var width = ui.size.width; // Add for width
  var height = ui.size.height; // added for height
  $("div#2").width(right);
    $("pre").text("Width: " + width + " & Height: " + height);
  }
});
$(element).resizeable({
    handles: 'n|s|e|w|nw|ne|sw|se',
    minWidth: Int,
    minHeight: Int,
    maxWidth: Int,
    maxHeight: Int,
    resize: function(event, ui) {
        // Statements
    }
});

.ui-resizable-e {
  background-color: black;
}
.ui-resizable-e:hover {
  cursor: grab;
}
body {
  margin: 0;
}
div {
  width:5px;
  height:100px;
  display: inline-block;
}
div#1 {
  background-attachment: fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#frame{
    width:700px;
    height:500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="frame">
<div id="1">
Resize Me
<br>
Result
<pre>Width and Height information here</pre>
</div>
<div id="2"></div>
</div>

Answer 2

您应该使用 jQuery UI 的.resizable()交互。

句法

$(element).resizeable({
    handles: 'n|s|e|w|nw|ne|sw|se',
    minWidth: Int,
    minHeight: Int,
    maxWidth: Int,
    maxHeight: Int,
    resize: function(event, ui) {
        // Statements
    }
});

例子

$("div#1").resizable({
  handles: 'e',
  minWidth: 0,
  minHeight: $("body").height(),
  maxWidth: $("body").width(),
  maxHeight: $("body").height(),
  resize: function(event, ui) {
  var left = Math.round(((ui.size.width / $("body").width()) * 100));
  var right = Math.round((100 - ((ui.size.width / $("body").width()) * 100)));
  $("div#2").width(right);
    $("pre").text("Left: " + left + " & Right: " + right);
  }
});

.ui-resizable-e {
  background-color: black;
}
.ui-resizable-e:hover {
  cursor: grab;
}
body {
  margin: 0;
}
div {
  width:50vw;
  height:100vh;
  display: inline-block;
}
div#1 {
  background-image: url("https://images.pexels.com/photos/132037/pexels-photo-132037.jpeg?cs=srgb&dl=beach-blur-boardwalk-132037.jpg&fm=jpg");
  background-attachment: fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="1">
Resize Me
<br>
Result
<pre>Left: 50 & Right: 50</pre>
</div>
<div id="2"></div>