title: How can I move multiple DOM elements using javascript?
body: <p>I have made a object called <code>Circle</code> and have two instances of this object called <code>circle1</code> and <code>circle2</code> Im trying to get them to swap positions, But only one of them is moving at the moment.</p>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>var gap = 6, size= 60;
  var Circle = function(t,l, color){
          var elem = document.createElement('div');
          t = t,
          l = l;
  
          elem.setAttribute("class", "circle");
          elem.style.backgroundColor = color;
  
          // init positions
          elem.style.top  = gap+t*(size+2*gap) + "px";
          elem.style.left = gap+l*(size+2*gap) + "px";
          document.body.appendChild(elem);
  
          this.getPosition = function(){
              return [t,l];
          };
  
          this.setPosition = function(arr){
              t = arr[0];
              l = arr[1];
              elem.style.top  = gap+t*(size+2*gap) + "px";
              elem.style.left = gap+l*(size+2*gap) + "px";
          };
  }
  
  // make two new circle objects 
  var circle1 = new Circle(0, 0, "blue");
  var circle2 = new Circle(0, 1, "red");
  
  // we need the circles to swap positions
  setTimeout(function(){
      circle1.setPosition(circle2.getPosition());
      circle2.setPosition(circle1.getPosition()); // this is not working
  }, 1000);
  </code></pre>
  
  <p>I have put this code on jsFiddle to make it easier:
  <a href="http://jsfiddle.net/rhL7671p/" rel="nofollow">http://jsfiddle.net/rhL7671p/</a></p>