javascript - ドラッグ可能な成長す​​る div を中央に配置する

Question

ドラッグしてスケーリングできるdivがあります。ウィンドウよりも大きい場合とそうでない場合があります。divの幅または高さが（スケーリング関数によって）変更されたときに、ウィンドウを基準にして現在の中心を中心に保つ関数を作成しようとしています。これを行うには、現在の上と左の位置に関連する数値に、その上と左 (またはマージンですが、上と左の位置を優先) を変更する必要があります。現在の位置を中心に保つ関数のロジックに頭を悩ませることはできません。完全に中央に配置するには、上と左を div のサイズの (-) 半分に変更しますが、現在の中央を中心に配置するにはどうすればよいでしょうか!

Answer 1

div の幅/高さのサイズをどのように大きくするかに応じて、div のマージンを変更して、サイズの変化の一部を反映することができます。同様の方法で左/上の絶対値を変更することも検討できます。

たとえば、jQuery animate の場合:

$("#draggable").animate({
    height: '+=60',
    width: '+=60',
    marginLeft: '-=30',
    marginTop: '-=30'
},1000);

例：

http://jsbin.com/ikabih/2/edit

Answer 2

友人の助けを借りて手に入れた..

function changeZoom(amount)
{   
    var oldWidth = $('#zoom').width(), oldHeight = $('#zoom').height();
    if(oldWidth == amount){return false}
    var xPercent = (($('#viewer').width() / 2) + Math.abs($('#zoom').position().left)) / oldWidth,
    yPercent = (($('#viewer').height() / 2) + Math.abs($('#zoom').position().top)) / oldHeight;

    var newLeft = (amount * xPercent) - ($('#viewer').width() / 2),
    newTop = (amount * yPercent) - ($('#viewer').height() / 2);

    newLeft = 0 - newLeft;
    newTop = 0 - newTop;

}