Di chuyển jQuery div từ vị trí 1 đến 2

Question

Tôi có nhiều div (có cùng tên lớp). Tôi muốn di chuyển div (luôn luôn cùng một div, trong đó có ID duy nhất #pos1) đến div đã được nhấp. Vì vậy, cho mục đích đó, tôi đang sử dụng mã sau đây để tìm vị trí1 (của div mà tôi muốn di chuyển) và pos2 (div được nhấp).

Tuy nhiên, tôi không biết làm thế nào tôi có thể di chuyển (animate vv) div từ vị trí này sang vị trí khác. Tôi sẽ appriciate bất kỳ sự giúp đỡ.

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

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

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

}); 

Answer 1

Trước hết hãy chắc chắn rằng tất cả .container div của bạn là position:absolute

Sau đó, bạn có thể sử dụng animate chức năng sau đây của jQuery:

$('.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 
    }); 
}); 

Answer 2

Cả divs nên có position :relative hoặc có thể bạn có thể cho div di chuyển của mình một position: absolute để trên cùng và bên trái để hoạt động bình thường.