jQuery 可调整大小 : doubling the resize width

Question

概要:

如果将可调整大小的元素居中并向左/右扩展，它会产生一种错觉，即它只扩展了鼠标移动的一半。

原因:

发生这种情况是因为对象居中。

问题:

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

Answer 1

给定一个居中的 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;
                            }
     });

上面只是计算了最终宽度和原始宽度之间的差异，并将其乘以二，然后将其添加到原始宽度。

我不确定这是最好的方法。一方面，我不喜欢它，因为宽度在对象上设置了两次。我认为更好的方法是接受某种 (xRate 或 X-Step) 和 (yRate 或 Y-Step ) 选项并将其包含在 jQuery 函数的 _mouseDrag: 部分中。

要在不编辑 jQuery 的情况下完成此操作，我想我必须创建一个插件来覆盖可调整大小的 _mouseDrag 函数。

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