Question

我试图使用jQuery Resizable来实质上编辑元素上的填充，并且一直在努力让这个坏男孩工作或找到可能提供一些洞察力的资源。

我基本上这样做是为了将高度变化映射到填充变化：

$(".block-wrapper").resizable({
      handles: "n, s",
      resize: function(event, ui) {

          var padding = ((ui.size.height - ui.originalSize.height)/2);

          ui.element.css({
              'height': 'initial',
              'padding-top': padding+'px',
              'padding-bottom': padding+'px'
          });

       }

});

（更多信息：https://jsfiddle.net/6vs37ot0/1/）

第一次使用时效果非常好但是当你再次调整它时，它会再次调整大小之前重新恢复到原来的大小。

关于我如何能够解决这个问题的任何想法都很棒。

Answer 1

您的问题在于行var padding = ((ui.size.height - ui.originalSize.height)/2);

当您停止调整块大小时，即在mouseup上，ui.originalSize.height设置为最后ui.size.height，因此ui.size.height - ui.originalSize.height将返回零并且您的填充消失了！

但是你为什么要经历使用填充的所有麻烦？如果它只是垂直居中文本，那么有一些更简单的 css 解决方案。

.block-wrapper {
    display: flex;
    justify-content: center; /* align horizontal */
    align-items: center; /* align vertical */
 }

和更简单的js：

jQuery(document).ready(function($){
   $(".block-wrapper").resizable({handles: "n, s"});
});

使用jQuery resizable来更改填充

1 个答案: