Jquery动画不会为同一个div元素两次工作两次

Question

我的代码中有8个div块，名称和id img1到img8，相应的8个下拉列表名称和id drop1到drop8。 8个div显示为2行的网格。

现在对于div img1如果我在下拉值8中选择它，它应该移动到div img8的位置，反之亦然。该过程可以重复多次。我面临的问题是，如果我对同一个div进行两次操作，则div会以一种奇怪的方式在整个页面上移动。我的Jquery和JS代码如下：

$(".drop").change(function(){
    var flag=false;

    for(var i=1;i<=8;i++){
        var dropdown = document.getElementById('drop'+i);

        if(flag==true && source.value!=i)
        {
            dropdown.value=i;
        }
        if(dropdown.value!=0 && dropdown.value!=i && flag==false)
        {
            var pos= i;
            var source_div = document.getElementById('img'+i);
            var source= dropdown;
            var destination = document.getElementById('drop'+dropdown.value);   
            var destination_div= document.getElementById('img'+dropdown.value); 
            var posDrop=Math.ceil(dropdown.value/4);
            var posI=Math.ceil(i/4);

            var modDrop = (dropdown.value%4);
            var modI = (i%4);
            if(modDrop==0)
                modDrop=4;
            if(modI==0)
                modI=4;
            if(modDrop>modI)
            {
                // move right
                var diff= modDrop-modI;
                $("#img"+i).animate({left:+((diff)*151)+"px"});
                $("#img"+dropdown.value).animate({right:+((diff)*151)+"px"});
            }
            else if(modDrop<modI)
            {
                // move left
                var diff= modI-modDrop;
                $("#img"+i).animate({right:+((diff)*151)+"px"});
                $("#img"+dropdown.value).animate({left:+((diff)*151)+"px"});
            }

            if(posDrop>posI)
            {
                //move down
                $("#img"+i).animate({top:+(150)+"px"});
                $("#img"+dropdown.value).animate({bottom:+(150)+"px"});
            }
            else if(posDrop<posI)
            {
                // move up
                $("#img"+i).animate({bottom:+(150)+"px"});
                $("#img"+dropdown.value).animate({top:+(150)+"px"});
            }
            flag=true;

        }
    }
    destination.value=pos;

    var temp_div= source_div.id;
    source_div.id = destination_div.id;
    destination_div.id = temp_div;

    var temp = source.id;
    source.id=destination.id;
    destination.id=temp;

});