Clever Geek Handbook

How can I move multiple DOM elements using javascript?

I created an object named Circle

and had two instances of that named object circle1

and circle2

Im trying to get them to swap, 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've put this code on a jsFiddle to make it easier: http://jsfiddle.net/rhL7671p/

+3


source to share


4 answers


Just fix the position of the first circle:

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

Sample script

In your code after this line



circle1.setPosition(circle2.getPosition());

the position of the first circle is overwritten with the position of the second. Hence the next line has no effect. It doesn't exist like parallel code execution in JavaScript, as there is only one thread (with some exceptions ...).

To work around this issue: first select one (or both) of the position (s) and then set them later.

+4


source


Save the position of the left circle before updating 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;
}
Run codeHide result


+3


source


The result getPosition

is not what you expect after you have moved the first circle, so cache it before moving

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


source


This is because when you try to get the position of an element, it has a 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>
Run codeHide result


+2


source






More articles:


All Articles