使用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可調整大小來更改填充

回答

相關問題