jQuery Resizable:将调整大小宽度加倍 [英] jQuery Resizable: doubling the resize width

问题描述

如果将可调整大小的元素居中并向左/向右扩展，则有一种幻觉，即它仅扩展了鼠标移动的一半.

If you center a resizable element and expand it left/right, it has the illusion that it is only expanding half of the mouse movement.

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

This happens because the object is centered.

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

How would you increase the rate that the object is being resized compared to the mouse movement? For centered elements, I'd like the object to expand twice the size of the mouse distance.

推荐答案

给出一个居中的DIV，我能想到的最好的办法就是在回调中设置宽度.

Given a centered DIV, the best I could think of would be to set the width in the callback.

     $('#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，然后将其与原始宽度相加.

The above simply calculates the difference between the final and original width and multiplies that by two, then adds that to the original width.

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

I'm not sure this is the best way to do this. I, for one, don't like it since the width is being set twice on the object. I think the better way would be to accept some sort of (xRate or X-Step) and (yRate or Y-Step) option and include that in the _mouseDrag: portion of the jQuery function.

要执行此操作而不编辑jQuery，我想我必须创建一个覆盖可调整大小的_mouseDrag函数的插件.

To do this w/o editing jQuery, I think I'd have to create a plugin that overwrites the resizable's _mouseDrag function.

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

这篇关于jQuery Resizable:将调整大小宽度加倍的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！