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;
    }
});