因式分解css3变换比例到jQuery UI可调整大小

我想在使用jQuery UI可调整大小时缩放元素的效果。因式分解css3变换比例到jQuery UI可调整大小

这里有一些关于css3转换问题的大小/拖动...没有一个我发现提供了一个成功的解决方案。

我现在暂时搁置轮换问题。只是想要它与规模工作。

我设法修改可拖动，但遇到可调整大小的问题。例如：完成此

HTML 

<div id= 'div1'> 
resize the div and note that the mouse cursor's 
distance from the resize handle increases over time 
<div> 

    CSS 
#div1{ 
    margin:100px; 
width:100px; 
height:100px; 
border:1px solid black; 
font-size:12pt; 
overflow:hidden; 
-webkit-transform:scale(2); 
} 

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

http://jsfiddle.net/asaf/JBE2r/1/

来源

2012-10-29 CodeToad

注意：在jquery ui 1.8.11中注释掉'bugfix'会大大减少这个问题。但是相对于元素的光标位置仍然存在问题。搜索ui代码：// bugfix for http://dev.jquery.com/ticket/1749 – CodeToad

更改库的源代码始终是对非泛型情况进行扩展的最糟糕的方式。 :) –

的一种方式是分割dx和dy变量在由变换规模属性的_mouseDarg事件。（在我的情况下，x和y变换总是相同的）我在mousestart事件中设置'scaleFactor'参数。

_mouseDrag: function(event) { 
    console.log(this.size.height); 
var yDiff = event.pageY/this.originalMousePosition.top; 
//console.log(yDiff); 

    //Increase performance, avoid regex 
    var el = this.helper, o = this.options, props = {}, 
     self = this, smp = this.originalMousePosition, a = this.axis; 

    var dx = (event.pageX-smp.left)||0, dy = (event.pageY-smp.top)||0; 
    var trigger = this._change[a]; 
    if (!trigger) return false; 

    //NOTE adjusting dx, dy below by the transform scale factor: 

    dy = dy/self.scaleFactor; 
    dx = dx/self.scaleFactor;

来源

2012-10-30 05:59:44 CodeToad

我写了这个问题的解决方案，并在此发布的详细信息：

http://gungfoo.wordpress.com/2013/02/15/jquery-ui-resizabledraggable-with-transform-scale-set/

没有必要改变jQuery的UI的来源。您需要的仅仅是可调整元素的resize事件的回调函数，用于调整CodeToads答案中的比例因子。

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

来源

2013-02-15 23:43:52

因式分解css3变换比例到jQuery UI可调整大小

回答

相关问题