JQuery Resizable: Doubling the Resize Width

Question

Description:

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

Cause:

This is because the object is centered.

Question:

How would you increase the rate of change of an object compared to mouse movement? For centered elements, I would like the object to expand twice as much as the mouse distance.

Answer 1

Given a centered DIV, the best thing I could think of is 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 widths and multiplies by two, then adds this to the original width.

I am not sure if this is the best way to do this. For example, I do not like it, since the width is set twice on the object. I think the best way is to take some parameters ( xRate or X-Step ) and ( yRate or Y-Step ) and include this in the _mouseDrag: jQuery function part.

To do this without jQuery editing, I think I need to create a plugin that overwrites the _mouseDrag mutable dimensional function.

I will accept the best answers! :)

Answer 2

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

In his heart I do something similar to vol7ron, but I use one less purpose, and we read the calculation better: D just joke, choose what you like, it suits you better

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