如何使用javascript移动多个DOM元素？

我制作了一个名为

Circle

的对象，并有两个名为

circle1

和

circle2

的对象实例，我试图让它们交换位置，但目前只有一个在移动

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

我将此代码放在JSFIDLE上以使其更容易：

---

只需缓存第一个圆的位置：

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

在这行后面的代码中

circle1.setPosition(circle2.getPosition());

第一个圆的位置将被第二个圆的位置覆盖。因此，下一行没有效果。JavaScript中没有并行执行代码这回事，因为只有一个线程（有些例外…）

---

要避免此问题，请先获取一个（或两个）位置，然后再进行设置。

移动第一个圆后，

getPosition

的结果不是您期望的结果，因此请在移动前将其缓存

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

---

在更新位置之前，存储左圆的位置

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

var间隔=6，大小=60；
变量圆=函数（t、l、颜色）{
var elem=document.createElement（'div'）；
t=t，
l=l；
元素集合属性（“类”、“圈”）；
elem.style.backgroundColor=颜色；
elem.style.top=间隙+t*（尺寸+2*间隙）+“px”；
elem.style.left=间隙+l*（尺寸+2*间隙）+“px”；
文件.正文.附件（elem）；
this.getPosition=函数（）{
返回[t，l]；
}
this.setPosition=功能（arr）{
t=arr[0]；
l=arr[1]；
elem.style.top=间隙+t*（尺寸+2*间隙）+“px”；
elem.style.left=间隙+l*（尺寸+2*间隙）+“px”；
}
}
var circle1=新圆圈（0,0，“蓝色”）；
var circle2=新圆圈（0,1，“红色”）；
//我们需要圆圈来交换位置
setTimeout（函数（）{
var c=circle1.getPosition（）；
circle1.setPosition（circle2.getPosition（））；
圆圈2.设定位置（c）；
}, 1000);
console.log（圆圈2）

.circle{
宽度：60px；
高度：60px；
边界半径：50px；
背景色：红色；
位置：绝对位置；
-webkit转换属性：顶部、左侧；
-webkit转换持续时间：0.3s；
}

之所以发生这种情况，是因为当您尝试获取元素的位置时，该元素具有新的值。一种可能的解决方案是使用局部变量：

var间隙=6，
尺寸=60；
变量圆=函数（t、l、颜色）{
var elem=document.createElement（'div'）；
t=t，
l=l；
元素集合属性（“类”、“圈”）；
elem.style.backgroundColor=颜色；
elem.style.top=间隙+t*（尺寸+2*间隙）+“px”；
elem.style.left=间隙+l*（尺寸+2*间隙）+“px”；
文件.正文.附件（elem）；
this.getPosition=函数（）{
返回[t，l]；
}
this.setPosition=功能（arr）{
t=arr[0]；
l=arr[1]；
elem.style.top=间隙+t*（尺寸+2*间隙）+“px”；
elem.style.left=间隙+l*（尺寸+2*间隙）+“px”；
}
}
var circle1=新圆圈（0,0，“蓝色”）；
var circle2=新圆圈（0,1，“红色”）；
//我们需要圆圈来交换位置
setTimeout（函数（）{
//使用局部变量保持圆的位置
var circle1Pos=circle1.getPosition（）；
var circle2Pos=circle2.getPosition（）
circle1.设置位置（circle2Pos）；
圆圈2.设置位置（圆圈1）；
}, 200);
.circle{
宽度：60px；
高度：60px；
边界半径：50px；
背景色：红色；
位置：绝对位置；
-webkit转换属性：顶部、左侧；
-webkit转换持续时间：0.3s；
}
当您在下一行调用
getPosition（）
时，圆圈1的位置已经更改