jQuery UI：我的調整大小功能工作不正常

我想知道我的大小調整功能不能正常工作，因爲我認爲這意味着問題是當我調整div的大小（增加填充），並離開它，當我再次嘗試調整它的填充縮小。jQuery UI：我的調整大小功能工作不正常

注：我增加填充不是高度。

$(function() { 
    $("#resizable").resizable({ 
     resize: function(event, ui) { 
     var originalHeight = ui.originalSize.height; 
     var newHeight = ui.size.height; 
     var pad = 5; 
     if (originalHeight < newHeight) { 
      pad = newHeight - originalHeight; 
     } 
     $(this).css({'padding': pad, 'height': 200, 'width': 400}); 
     } 
    }); 
});

My fiddle link

來源

2017-06-06 user7791702

看看，如果這個工程大概是接近你想要什麼：https://jsfiddle.net/6rh7emog/4/ –

@JunaidAhmad我很抱歉它沒有工作。在第二次調整大小時，立即減少填充。問題是一樣的。 – user7791702

我認爲問題來自改變填充。我看到它的方式，ui.originalSize.height得到的高度屬性，在你的情況下，無論填充都保持200。 – Botimoo

呀@Botimoo似乎是正確的。你可能應該考慮使用除了填充以外的東西來定位。但這樣的事情，如果你想堅持的填充

https://jsfiddle.net/6rh7emog/5/

<div id="resizable" class="ui-widget-content"> 
    <div id="wrapper"> 
    <h3 class="ui-widget-header">Resizable</h3> 
    </div>

$(function() { 
    $("#resizable").resizable({ 
     aspectRatio: true, 
     resize: function(event, ui) { 
     var originalHeight = ui.originalSize.height; 
     var newHeight = ui.size.height; 
     $('#wrapper').css({ 
       'padding': newHeight - 200 
     }); 
     } 
    }); 
});

來源

2017-06-06 08:09:50 noveyak

還有一件事我該如何檢測div的哪一側已經增加或減少（意味着div已經從北側或南側調整大小，我怎麼能檢測到這個） – user7791702

你的例子中的問題是填充靜止0px 。 – user7791702

你看過小提琴嗎？從視覺角度來看，填充與您的小提琴相同，區別在於我將其應用於包裝而不是可調整大小的元素，因此當您再次調整大小時，大小不會恢復爲原始大小。對於北/南側我認爲唯一可調整大小的部分是div的右側和底側。不確定你在這裏的含義 - 如果你想得到答案，你應該打開另一個問題。 – noveyak

jQuery UI：我的調整大小功能工作不正常

回答

相關問題