title: Dynamically change transform-origin for a scale in jquery after drag
body: <p>I'm working on an page that contains a rectangular inner-block inside a container. The inner-block can be dragged and also be scaled when you scroll the mouse. </p>
  
  <p>[ <a href="http://jsfiddle.net/z2aQ2/54/" rel="nofollow">See my JSFiddle</a>. ]</p>
  
  <p>The center of the screen is the origin point of the zoom transformation, so when the inner-block is centered in the page it appears to simply scale, but when you drag the inner-block about the center origin point, it will scale appropriately around or away from the center point of the screen. I marked the center screen point with a small red dot in the JSFiddle so its easier to see.</p>
  
  <p>As the inner-block is dragged around I recalculate the top/left coords of it, and also the difference between that position and the center of the page in order to get the transformation-origin adjustment coords.</p>
  
  <p><strong>PROBLEM</strong>: It works fine when the inner-block is scale-factor 1, but if you zoom and then drag the object, it unexpectedly jumps position and doesn't zoom back correctly. Are you able to see what I am doing wrong, or what I would need to add to prevent the unexpected behavior? Thanks in advance!</p>
  
  <pre><code>//Get center of the page "origin"
  var originX = $('.block').width()/2;
  var originY = $('.block').height()/2;
  
  //Get center point of the inner-block
  var blockRX = $('.inner-block').width()/2;
  var blockRY = $('.inner-block').height()/2;
  
  //Set position of the inner-block to match center origin initially
  $(".inner-block").css({top: originY-blockRY, left: originX-blockRX});
  $(".inner-block").draggable();
  
  //Initial Scale 1:1
  var scale_system = 1;
  
  //Get Top/Left coords of inner-block
  var blockTop = $('.inner-block').offset().top;
  var blockLeft = $('.inner-block').offset().left;
  
  //Calculate diff between center of page and Top/Left of inner-block
  var xCalc = (originX-blockLeft);
  var yCalc = (originY-blockTop);
  
  //Set origin of transformations as center of page (in relation to Top/Left)
  //Using the just calculated values
  $(".inner-block").css({"-webkit-transform-origin": xCalc+"px "+yCalc+"px"});
  
  //Zoom settings
  var maxScale = 4;
  var minScale = 1;
  var zoomScale = .07;
  
  //Drag Actions
  $(function() {
      var isDragging = false;
  
      //Perform calculations as drag occurs
      $(".inner-block").mousedown(function() {
          $('.inner-block').mousemove(function(e) {
              isDragging = true;
              $(window).unbind("mousemove");
  
              //Get New Top/Left of inner-block as it drags
              blockTop = $('.inner-block').offset().top;
              blockLeft = $('.inner-block').offset().left;
              console.log("BlockTopLeft "+blockLeft+" "+blockTop);
  
              //Calculate new diff between Top/Left and Origin
              xCalc = (originX-blockLeft);
              yCalc = (originY-blockTop);
              console.log("Origin Distance "+xCalc+" "+yCalc);
              })
      })
      .mouseup(function() {
          var wasDragging = isDragging;
          isDragging = false;
          $(window).unbind("mousemove");
          if (wasDragging) {
              //Update origin position in relation to Top/Left of inner-block
              $(".inner-block").css({"-webkit-transform-origin": xCalc+"px "+yCalc+"px"});
          }
      });
  });
  
  //Perform scroll function below on mousewheel
  $('.block').bind('mousewheel', function (event) {
      scroll(event);
  });
  
  function scroll(event) {
  
      event.preventDefault();  
  
      var newScale = ((event.originalEvent.wheelDelta / 120 &gt; 0) ? 
                      (scale_system * (1.0 + zoomScale)) : 
                      (scale_system * (1.0 - zoomScale)));
  
      scale_system = ((newScale &gt; maxScale) ? 
                      (maxScale) : 
                      (((newScale &lt; minScale)?
                        (minScale):
                        (newScale)))
                     );
  
      //Update Top/Left position of the inner-block
      blockTop = $('.inner-block').offset().top;
      blockLeft = $('.inner-block').offset().left;
      console.log("BlockTopLeft "+blockLeft+" "+blockTop);
  
      //Update X/Y radius to block center
      blockRX = ($('.inner-block').width()/2)*scale_system;
      blockRY = ($('.inner-block').height()/2)*scale_system;
      console.log("BlockRXY "+blockRX+" "+blockRY);
  
      //Recalculate the diff between T/L and origin
      console.log("Origin "+originX+" "+originY);
      xCalc = (originX-blockLeft);
      yCalc = (originY-blockTop);
      console.log("Origin - TL "+xCalc+" "+yCalc);
  
      $(".inner-block").css({"-webkit-transform": "scale(" + scale_system + ")"}); 
  }
  </code></pre>