jquery ui放大缩小,将css3变换缩放为jquery ui可调整大小

I am trying to factor in the effects of scaling an element when using jquery ui resizeable.

There are a few posts here about css3 transform issues with resize/drag... none of which I found to provide a successful solution.

I am setting aside the rotation issue for now. Just want it to work with scale.

I managed to modify the draggable, but having trouble with the resizeable.

example:

HTML

resize the div and note that the mouse cursor's

distance from the resize handle increases over time

CSS

#div1{

margin:100px;

width:100px;

height:100px;

border:1px solid black;

font-size:12pt;

overflow:hidden;

-webkit-transform:scale(2);

}​​

JS

$('#div1').resizable();

解决方案

I wrote a solution for this problem and posted the details here:

There is no need to change the source of jquery-ui. All you needed is a callback for the resize event of the resizable element that adjusts for the scale factor like in CodeToads answer.

function resizeFix(event, ui) {

var changeWidth = ui.size.width - ui.originalSize.width; // find change in width

var newWidth = ui.originalSize.width + changeWidth / zoomScale; // adjust new width by our zoomScale

var changeHeight = ui.size.height - ui.originalSize.height; // find change in height

var newHeight = ui.originalSize.height + changeHeight / zoomScale; // adjust new height by our zoomScale

ui.size.width = newWidth;

ui.size.height = newHeight;

}

$(this).resizable({

minWidth: -(contentElem.width()) * 10, // these need to be large and negative

minHeight: -(contentElem.height()) * 10, // so we can shrink our resizable while scaled

resize: resizeFix

});