使用jQuery可调整大小来更改填充

我正在尝试使用jQuery Resizable来实质上编辑元素上的填充，并一直在努力让这个坏男孩工作或找到可能给出一些见解的资源。使用jQuery可调整大小来更改填充

我基本上是做这个映射改变高度填充变化：

$(".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/）

而且它完美的第一次，但是当你回去进行调整再次在重新调整大小之前，它会恢复为原始大小。

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

来源

2016-09-16 Jeremy Abraham

你的问题是与线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"}); 
});

来源

2016-09-16 08:05:47

由于加布里埃尔。填充应用得很好，包括mouseup。当您再次调整大小时，它将清除填充，就好像块从原始大小开始一样。我的猜测是，可调整大小是读取当前高度（显然不包括填充），导致它在后续大小调整时恢复到原来的大小。 –

@JeremyAbraham：是的，我同意，填充应用得很好。我的意思是，当您开始调整大小时，使用'ui.size.height'和'ui.originalSize.height'计算的填充值始终为零，因为'originalSize'不是该块之前的第一个块大小调整大小，它是在点击拖动鼠标之前移动鼠标的大小。那我的第二个选择呢？你真的需要调整填充吗？ –

使用jQuery可调整大小来更改填充

回答

相关问题