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