Как получить размер панели при изменении размера?

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 помещает диаграмму d3 в SVG. Мне нужно знать размер деления, поскольку он изменяет размер, когда пользователь перемещает полосу делителя, чтобы я мог соответствующим образом изменить размер диаграммы. В настоящее время 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

Вы должны использовать 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").resizable({
  handles: 'e, se, s',
  minWidth: 50,
  minHeight: 50,
  maxWidth: 200,
  maxHeight: 200,
  resize: function(event, ui) {
    $("pre").text(ui.size.width + 'x' + ui.size.height);
  }
});

.ui-resizable-e, .ui-resizable-s {
  background-color: black;
}
div {
  width:100px;
  height:100px;
}

<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>Resize Me</div>
<br>
Result
<pre></pre>

Answer 2

Я взял приведенный ниже код от Maytha8 и его сообщения выше.
За исключением того, что мой показывает ширину и высоту вместо левого и правого.
Я надеюсь, что это поможет другим.
Спасибо, Maytha8

Уэйн