How can I move multiple DOM elements using javascript?

Question

I have made a object called Circle and have two instances of this object called circle1 and circle2 Im trying to get them to swap positions, But only one of them is moving at the moment.

Javascript:

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);

I have put this code on jsFiddle to make it easier: http://jsfiddle.net/rhL7671p/

Answer 1

Just cache the position of the first circle:

setTimeout(function(){
   var pos = circle1.getPosition();
   circle1.setPosition( circle2.getPosition() );
   circle2.setPosition( pos );
}, 1000);

Example Fiddle

In your code after this line

circle1.setPosition(circle2.getPosition());

the position of the first circle is overwritten with the position of the second one. Hence the next line has no effect. There is no such thing as parallel execution of code in JavaScript as there is just one thread (with some exceptions ...).

To circumvent this problem: First get one (or both) position(s), and then set them afterwards.

Answer 2

Store the position of the left circle before you update the position.

setTimeout(function(){
    var c = circle1.getPosition();
    circle1.setPosition(circle2.getPosition());
    circle2.setPosition(c);
}, 1000);

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;
        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";
    	}

       	
	}

var circle1 = new Circle(0,0, "blue");
var circle2 = new Circle(0,1, "red");

// we need the circles to swap positions
setTimeout(function(){
    var c = circle1.getPosition();
    circle1.setPosition(circle2.getPosition());
    circle2.setPosition(c);
}, 1000);

console.log(circle2)

.circle{
    width:60px;
    height:60px;
    border-radius: 50px;
    background-color:red;
    position:absolute;
    -webkit-transition-property: top, left;
        -webkit-transition-duration: 0.3s;
}