jQuery将div从位置1移动到2

时间:2012-08-09 09:05:40

标签: javascript jquery

我有多个div(具有相同的类名)。我想将div(总是具有唯一ID #pos1的相同div)移动到已被单击的div。因此,为此目的,我使用以下代码来找到position1(我要移动的div)和pos2(被点击的div)。

但是,我不知道如何将div从一个位置移动到另一个位置(动画等)。我会饶有兴趣。

jQuery(".container").click(function() {

    var pos1 = jQuery("#pos1").position();
    alert(pos1.top + ', ' + pos1.left);

    var pos2 = jQuery(this).position();
    alert(pos2.top + ', ' + pos2.left);

});

2 个答案:

答案 0 :(得分:5)

首先确保所有.container div都是position:absolute

然后你可以使用jQuery的以下animate函数:

$('.container').click(function(){
    var pos1 = $('#pos1').position();

    $(this).animate({ 'top': pos1.top + 'px', 'left': pos1.left + 'px'}, 200, function(){
        //end of animation.. if you want to add some code here
    });
});

答案 1 :(得分:0)

这两个div应该有position :relative,或者你可以为你的移动div position: absolute提供顶部和左部的正常工作。