0

jquery ui resizeable を使用するときに、要素のスケーリングの影響を考慮に入れようとしています。

ここには、サイズ変更/ドラッグに関する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/

4

2 に答える 2

0

この問題の解決策を書き、詳細をここに投稿しました。

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

jquery-ui のソースを変更する必要はありません。必要なのは、resizeCodeToads の回答のように倍率を調整するサイズ変更可能な要素のイベントのコールバックだけです。

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-15T23:43:52.273 に答える
0

これを実現する 1 つの方法は、_mouseDarg イベントの dx 変数と dy 変数を変換スケール属性で除算することです。(私の場合、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-30T05:59:44.707 に答える