Search code examples
javascriptjquerydraggablecentering

center a draggable growing div


I have a div which could be dragged around and scaled. It may or may not be larger than the window, I am trying to write a function which will keep it centered around its current center relative to the window when the div's width or height is changed (by a scaling function). To do this I will need to change its top and left (or its margin but prefer top and left position) to a number which relates to its current top and left position. I just can't wrap my head around the logic of the function which will keep it centered at its current position. To center it completely I would just change its top and left to (-)half of the size of the div, but to keep it centered around its current center what would i do!


Solution

  • Got it with help from a friend..

    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;
    

    }