jQuery Resizable:加大调整宽度

时间:2010-11-15 17:13:06

标签: jquery jquery-ui jquery-ui-resizable jquery-resizable

梗概:

如果将可调整大小的元素居中并向左/向右展开,则会产生幻觉,它只会扩展鼠标移动的一半。

原因:

这是因为对象居中。

问题:

与鼠标移动相比,您如何提高调整对象大小的速度?对于居中元素,我希望对象扩展两倍于鼠标距离的大小。

2 个答案:

答案 0 :(得分:2)

给定一个居中的DIV,我能想到的最好的方法是在回调中设置宽度。

     $('#divID').resizable({
            handles       : 'e,w'
          , resize        : function (event,ui){
                               ui.position.left = ui.originalPosition.left;
                               ui.size.width    = ( ui.size.width
                                                  - ui.originalSize.width )*2
                                                  + ui.originalSize.width;
                            }
     });

上面只是计算最终宽度和原始宽度之间的差异,然后乘以2,然后将其加到原始宽度。

我不确定这是最好的方法。因为宽度在对象上设置两次,所以我不喜欢它。我认为更好的方法是接受某种(xRateX-Step)和(yRateY-Step)选项并将其包括在_mouseDrag:中jQuery函数的一部分。

要做这个没有编辑jQuery,我想我必须创建一个覆盖可调整大小的_mouseDrag函数的插件。

我会接受更好的答案!:)

答案 1 :(得分:2)

我不知道你如何将你的resizable中心化,但这个test case对我很有用。

在它的核心我做了类似于vol7ron的事情,但是我使用了一个较少的任务并且计算更具可读性:D只是开玩笑选择你喜欢的更适合你的

ui.size.width += ui.size.width - ui.originalSize.width;