jQuery-UIサイズ変更可能：resizable divに比例してすべてのresResize要素をスケールします

Question

私はresizableに設定された要素の選択範囲に配置されたサイズ変更可能なdivを持っています。

視覚的には、サイズ変更可能な要素は、alsoResize要素のバウンディングボックスです。

私は、サイズ変更可能なdivに比例して、alsoResize要素のサイズを変更できるようにします。 UIのデフォルトの動作は、リサイズ時に各要素が固定左と上の位置を持っています：

http://jsfiddle.net/digitaloutback/SrPhA/2/

しかし、私はそれがサイズ変更だとバウンディングボックスをスケールする各AR要素の左と上を調整したいです。

私はまず、これがtooResizeプラグインを変更することであまり面倒ではないと思った。これは私がリサイズに追加するものです：_alsoResize：

// Get the multipliers 
var scaleX = self.size.width/os.width; 
var scaleY = self.size.height/os.height; 

newElW = (parseInt(el.css('width')) * scaleX); 
newElH = (parseInt(el.css('height')) * scaleY); 
newElL = (parseInt(el.css('left')) * scaleX); 
newElT = (parseInt(el.css('top')) * scaleY); 

el.css({ width: newElW, height: newElH, left: newElL, top: newElT }); 

ご覧のとおり、ボックスが多少遅れる：

http://jsfiddle.net/digitaloutback/SrPhA/4/

何かが数字をバルーニングすることができない、非常に思えますそれを把握し、何か提案を感謝します。おそらくスクリプト間の小数点の矛盾&ブラウザ？

Answer 1

たぶん、あなたはそれらのコンテナのサイズを変更している間、この方法は、彼らが自動的にサイズが変更されます..あなたが.resizer要素内.lyr要素を挿入し、パーセンテージ位置とその中にそれらを配置することができ

..構造を再考する必要があります。

デモ、脱結合するためにhttp://jsfiddle.net/SrPhA/65/

---

更新

コメント後で（プラグインは、彼らにを処理する必要はありません）alsoResize要素からresizerます計算のために2つのことを考慮に入れる必要があります。

• まず、あなたが原点に要素を翻訳する必要が位置決めのための
• ..始まる寸法/位置やない要素の電流を使用するので、start.width.heightなどを使用する必要があります（でresizerからの距離に関して）左/トップをスケーリングし、再び彼らがいた場所に再変換..

最終計算は

0になります

リサイザの上端または左端をドラッグして要素を拡大縮小した場合、これを処理するにはさらに手を加える必要があります。すべての方向にスケーリング処理するhttp://jsfiddle.net/gaby/SrPhA/171/

---

で

デモ最新のアップデート

..

utils: { 
     west: function(start, op, scale, delta) {return ((start.left - op.left) * scale) + op.left + delta.left}, 
     east: function(start, op, scale, delta) {return ((start.left - op.left) * scale) + op.left;}, 
     south: function(start, op, scale, delta){return ((start.top - op.top) * scale) + op.top; }, 
     north: function(start, op, scale, delta){return ((start.top - op.top) * scale) + op.top + delta.top; } 
    } 

がhttp://jsfiddle.net/gaby/SrPhA/324/

ですべての更新と例を作業するこれらのヘルパーを使用します

Answer 2

*の代わりに+を使用しましたか？

newElW = (parseInt(el.css('width')) + scaleX); 
newElH = (parseInt(el.css('height')) + scaleY); 
newElL = (parseInt(el.css('left')) + scaleX); 
newElT = (parseInt(el.css('top')) + scaleY); 

Answer 3

私は位置決めのためのマージントップとのmargin-leftを設定し、「トップ」を残すことによって少し運を持っていたし、「左」のアニメーションのためにデフォルトで属性。

http://jsfiddle.net/SrPhA/97/