title: EaselJS - dragging children of scaled parent
body: <p>NOTE: ** This is now resolved. See the 'FIX' in my answer below.
  Feel free to inject any further knowledge as you see fit.</p>
  
  <p>First, I have been studying and googling the localToGlobal, localToLocal, and globalToLocal, but I am just not understanding these methods enough to accomplish what I am trying to achieve - a drag of items in a scaled parent.</p>
  
  <p>I have a container which contains some graphical nodes.
  The container's scaleX and scaleY are at 0.5 (or any other arbitrary number).</p>
  
  <p>When dragging the nodes, they need to move, within the scaled parent container, inline with the e.mouseX/Y (which seems to be the same as Stage.mousX/Y).</p>
  
  <p>Below are some jsfiddles to demonstrate</p>
  
  <p>No Scale - works fine wih standard drag/drop code:
  <a href="http://jsfiddle.net/MZ6LE/1/" rel="nofollow">http://jsfiddle.net/MZ6LE/1/</a></p>
  
  <p>Scaled - fails with standard drag/drop code:
  <a href="http://jsfiddle.net/MZ6LE/3/" rel="nofollow">http://jsfiddle.net/MZ6LE/3/</a></p>
  
  <p>As you can see with the last fiddle, the 'node' doesn't stay 'locked' to the user's mouse action.</p>
  
  <p>I feel that I need to translate the global coordinates for the node in its scaled parent. Still, I don't see how setting the node's x/y to the event's stageX and stageY works when there is no scaling of the elements. </p>
  
  <p>With no scaling, the node is still within a parent container - not the main stage - and should have coordinates relative to its parent. So, if the parent is offset by 50, and the node starts at 0, 0, within its parent, the global stageX/Y properties should not represent the x/y of the node without some sort of translation.</p>
  
  <p>How does this work out of the box, as shown in the code below, and how can it be adjusted for dragging elements within a parent that is scaled?</p>
  
  <pre><code>function handleClick(event) {
      node.offset = {'x' : node.x - event.stageX, 'y' : node.y - event.stageY};
  }
  
  function handleMove(event) {
      node.x = event.stageX + node.offset.x;
      node.y = event.stageY + node.offset.y;
      stage.update();
  }
  </code></pre>
  
  <p>Any help is appreciated!</p>
  
  <p>Thanks.</p>