div要素を常にサイズ変更可能でドラッグ可能な2番目のDivの中央に配置します

Question

私はいくつかの異なるjQueryセンタリングプラグインを試しましたが、これを理解できないようです。

-------（DIV 2 - - （ドラッグ可能要素もDIV 3をドラッグDIV 1）-----

：基本的に私は、図示のように互いの上に配置された3つのdivを有します透明画像が含まれている - 静止のまま）

は---------（DIV 3 - DIV 1でドラッグイメージを含むだけでなく、サイズ変更可能であり、回転することができる）

だから、基本的にDIV1の画像が含まれています（移動アイコン）DIV3を動かすとDIV1のアイコンがDIV3の中央にある必要があります。どこに（3）が移動されたか、サイズが変更されたか、回転しているかどうかは関係ありません。私は本当に助けに感謝し、適切に動作するように何かを得ることができない。

フィドル：http://jsfiddle.net/EBNDf/1/

おかげで、

ショーン

      <h1>Preview</h1> 
          <br> 
          <!-- Zoom Slider --> 
          <div id="zoomslider" style="float:left; width:55px; height:405px;"> 
            <div id="slider-vertical" style="height:100%; margin: auto auto;"></div> 
          </div> 

          <!--- Preview Container --> 
          <div id="previewcontainer" style="float:left; width:485px; height:405px;"> 

           <div id="drag-overlay"></div> 

           <div id="background-overlay"> 
           </div> 

            <!-- Loaded Face Image --> 
            <div id="loaded-image" class="preview ui-widget-content ui-draggable"></div> 

          </div> 

           <!-- Clear Fix --> 
           <div id="blank" style="float:left; width:55px; height:55px;"></div> 

          <!-- Rotate Slider --> 
          <div id="rotateslider" style="float:left; width:485px; height:55px;"> 
           <br> 
            <div id="slider" style="width:100%; margin: auto auto;"></div> 
          </div>         


          <script> 
           //make resizable and rotate via slider 
           //make draggable 
           //get position of loaded-image 
           $("#drag-overlay").multiDraggable({ group: [$("#drag-overlay"),$(".preview") ]}); 

           $("#slider-vertical").slider({ 
            orientation: "vertical", 
            value: 50, 
            max: 500, 
            min: 100, 
            slide: function(event, ui) { 
             $(".preview").width(ui.value); 
             $(".preview").height(ui.value); 
           } 
           }); 

           $("#slider").slider({ 
            min: 0, // degrees 
            max: 360, // degrees 
            slide: function(e, ui) { 
            $('.preview').jangle(ui.value); 
            }, 
            stop: function(e, ui) { // in case you out slide the slider 
            $('.preview').jangle(ui.value); 
            } 
           }); 

           //center drag element onto loaded-image 

Answer 1

私はちょうど元のcssの位置付けに依存しないように、代わりに完全に動的で実際の要素の寸法になるように数学を変更しました。

私が話していることの完全に動的な例については、以下のコードを確認してください。私はあなたの選択を "最適化"するために$ drag_overlayを使用しているので、domは繰り返しdocument.getElementByIdsをしません。それはダイレクトIDなので、最適化ではパフォーマンスは向上しませんが、少し効率が上がります:)しかし、$（ 'プレビュー'）セレクタにはかなりの影響があります:)

var $drag_overlay = $('#drag-overlay'), 
    $preview = $('.preview'); 

$drag_overlay.css({ 
    top : $preview.height()/2 - $drag_overlay.height()/4, 
    left : $preview.width()/2 - $drag_overlay.width()/4 
}); 

乾杯！

Answer 2

は最後に誰がそれを必要とする場合は、ここでフィドルを表示することができ、それが動作するようになった：http://jsfiddle.net/EBNDf/12/

オープン良くします提案も同様です。