jQuery Resizable: doubling the resize width

Question

Synopsis:

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.

Reason:

This happens because the object is centered.

Question:

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.

Answer 1

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

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

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.

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

I'll accept better answers! :)

Answer 2

I don't know how you center your resizable but this test case works well for me.

At it's heart I do something similar to vol7ron but I use one assignment less and the calculation is better readable :D just joking choose what you like better fits you more

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