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/

circle1's position has already changed when you call getPosition() on the next line — Jamiec
– Jamiec, Commented Jan 5, 2015 at 16:03

Sirko · Accepted Answer · 2015-01-05 16:03:02Z

4

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.

answered Jan 5, 2015 at 16:03

Sirko

74.3k19 gold badges157 silver badges194 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

brbcoding · Accepted Answer · 2015-01-05 16:03:19Z

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

Paul S. · Accepted Answer · 2015-01-05 16:03:03Z

2

The result of getPosition isn't what you expect after you've moved the first circle, so cache it before the move

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

answered Jan 5, 2015 at 16:03

Paul S.

66.6k9 gold badges129 silver badges143 bronze badges

Comments

Alex Char · Accepted Answer · 2015-01-05 16:05:08Z

This is happening because when you try to get the position of the element has the new value. One possible solution is to use a local variable:

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() {
  //use local variables to keep circles position
  var circle1Pos = circle1.getPosition();
  var circle2Pos = circle2.getPosition()
  circle1.setPosition(circle2Pos);
  circle2.setPosition(circle1Pos);
}, 200);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Collectives™ on Stack Overflow

How can I move multiple DOM elements using javascript?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related