jQuery UI可調整大小的縮放比例僅為拖動的50％

Question

因此，我的目標是讓用戶設置頁面的寬度，最后這里會有很多數據，並且不需要浪費分辨率。

無論如何，重新調整盒子大小的機制只有一半有效。 從字面上看，只能縮放到應有大小的一半。 例如，實際頁面上的最小寬度設置為900px，屏幕的寬度為1920，當我將其抓到900並拖動到屏幕的一角時，我得到的寬度約為1410px。

我已經能夠在此jsfiddle中重現它： http : //jsfiddle.net/FY23J/

主體的最右邊是把手。 如果抓住它並移動它，您會看到該擴展僅在鼠標和原始邊緣之間擴展一半。 我檢查了jQuery UI文檔，這不是預期的行為，如您在此處看到的： http : //jqueryui.com/demos/resizable/#default

這是我的CSS設置方式引起的嗎？ 有人知道如何解決嗎？

Answer 1

我認為調整大小效果很好。 拖動鼠標20像素將對話框放大20像素。

問題是您使對話框居中，因此對話框兩端的拖動距離增加了一半。

Answer 2

這是解決方案。 乘以2。關於此處的操作，沒有太多文檔，所以，如果不正確，請告訴我。 演示： http ： //jsfiddle.net/FY23J/3/

$( "#wrapper" ).resizable({
    handles: 'e',
    alsoResize: "#nav",
    minWidth: 900,
    maxWidth: $(window).width()-25,
    stop: function(event,ui){
        console.log(ui.size.width);
    },
    resize: function(event, ui) {
        var self = $(this).data("resizable"),
            o = self.options,
            cs = self.size,
            os = self.originalSize;

        var newWidth = os.width + (Math.round((cs.width - os.width)*2));
        newWidth = newWidth <= o.minWidth ? o.minWidth : newWidth;
        newWidth = newWidth >= o.maxWidth ? o.maxWidth : newWidth;
        console.log(newWidth);
        self.size.width = newWidth;
    }
});