从 jquery.ui.resizable 获取旧尺寸值

Question

我正在尝试在调整大小后获取 div 的新大小。但是，当使用 ui.size.height 或 $(e.target).height() 时，我得到的是元素的原始高度。

function allowResizing(el){
  $(el).resizable({
        animate: true,
        containment: "parent",
        helper: "ui-resizable-helper",
        minWidth: 250,
        minHeight: 250,
        grid: [20, 20],
        stop: function( e, ui ) {
            console.log("height: " + $(e.target).height())
            console.log("height: " + ui.size.height)
            console.log("originalHeight: " + ui.originalSize.height)
        }
    });
}

所有三个日志写入相同的值。当我在另一页上的任何其他 div 上尝试此代码时，我得到了正确的值。

我的 hmtl：

<style>
.containment-wrapper > .row{
    border: 3px solid white;
    width: 100%;
    height: calc(100vh - 200px);
    min-height: 200px;
    position:relative;
}

.ui-resizable-helper {
 border: 2px dotted #b1b1b1; 
}
</style>

<div class="containment-wrapper">
   <div class="row">                                
     <div id="resizable" class="ui-draggable ui-draggable-handle" style="position: absolute !important; outline: 1px solid white;">
        <div class="Container_Header">
            <span style="display: block; padding: 0 10px" class="Text_H2">$title</span>
        </div>
        <p style="padding: 10px">
          Some text
        </p>
     </div>
     <script type="text/javascript">
        allowResizing("#resizable")
     </script>
   </div>
</div>

我也在同一元素上使用了 ui.Draggable，但也尝试过不使用它。

感谢每一个帮助。谢谢

Answer 1

既然您已经定义了一个 Helper，您将需要查看该元素的大小。

$(function() {
  function allowResizing(el) {
    $(el).resizable({
      animate: true,
      containment: "parent",
      helper: "ui-resizable-helper",
      /*
      minWidth: 250,
      minHeight: 250,
      grid: [20, 20],
      */
      resize: function(e, ui) {
        log("Height: " + ui.size.height);
      },
      stop: function(e, ui) {
        log("El height: " + $(ui.element).height());
        log("Stop height: " + ui.size.height);
        log("Original Height: " + ui.originalSize.height);
        log("Helper Height: " + ui.helper.height());
      }
    });
  }

  function log(str) {
    var log = $("#log").length ? $("#log") : $("<div>", {
      id: "log"
    }).appendTo("body");
    log.append(`<p>${str}</p>`).scrollTop(log.prop("scrollHeight"));
  }

  allowResizing("#resizable");
});

.containment-wrapper>.row {
  border: 3px solid white;
  width: 100%;
  height: calc(100vh - 200px);
  min-height: 200px;
  position: relative;
}

.ui-resizable-helper {
  border: 2px dotted #b1b1b1;
}

#log {
  font-size: 65%;
  height: 4em;
  overflow: auto;
}

#log p {
  padding: 0;
  margin: 0;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="containment-wrapper">
  <div class="row">
    <div id="resizable" style="position: absolute !important; outline: 1px solid white;">
      <div class="Container_Header">
        <span style="display: block; padding: 0 10px" class="Text_H2">$title</span>
      </div>
      <p style="padding: 10px">
        Some text
      </p>
    </div>
  </div>
</div>

从 jquery.ui.resizable 获取旧尺寸值

Getting old size values from jquery.ui.resizable

javascript

jquery

jquery-ui

jquery-ui-resizable