title: Move Symmetrically two groups in kineticjs
body: <p>I have two groups that are displayed symmetrically, in the stage, each one contains a line, my requirement is when i move a group the other group moves symmetrically to the first group.</p>
  
  <p>this is the code </p>
  
  <pre><code>    stage = new Kinetic.Stage({
  container: 'container',
  width: 900,
  height: 450
  });
  mouse = stage.getMousePosition();
  layer = new Kinetic.Layer();
  stage.on("mousedown", function () { 
      traitGroup = new Kinetic.Group({
      x:  mouse.x,
      y: mouse.y,
  
      draggable: true
      });
      traitGroupMir = new Kinetic.Group({
      x: stage.getWidth()-mouse.x,
      y: mouse.y,
  
      draggable:true
      }); 
      layer.add(traitGroup);
      layer.add(traitGroupMir);
  
      line = new Kinetic.Line({
      points: [0, 0, 0, 0],
      stroke: "red",
      strokeWidth: 5,
      draggable: false
      });
      lineMirr = new Kinetic.Line({
                points: [0, 0, 0, 0],
                stroke: "red",
        strokeWidth: 5,
        draggable: false
      });
      traitGroup.add(line);
      traitGroupMir.add(lineMirr);
  
  
      traitGroup.on('dragstart', function() {
      this.moveToTop();
      });
      traitGroupMir.on('dragstart', function() {
      this.moveToTop();
      });
  traitGroup.on('dragmove', function() {
      traitGroupMir.setX(stage.getWidth()-this.getX());
      traitGroupMir.setY(this.getY());
  });
  traitGroupMir.on('dragmove', function() {
  traitGroup.setX(stage.getWidth()-this.getX());
      traitGroup.setY(this.getY());
   });
      stage.add(layer);
   });
  </code></pre>
  
  <p>Is there an error in the code?</p>