2012-08-09 9 views
6

Ich habe mehrere divs (die gleiche Klassennamen haben). Ich möchte das div (immer dasselbe div, das die eindeutige ID #pos1 hat) in das div verschieben, auf das geklickt wurde. Zu diesem Zweck verwende ich den folgenden Code, um die position1 (des div, das ich verschieben möchte) und pos2 (das div, auf das geklickt wird) zu finden.jQuery move div von Position 1 nach 2

Allerdings weiß ich nicht, wie kann ich das Div von einer Position zur anderen bewegen (animieren etc). Ich werde jede Hilfe schätzen.

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

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

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

}); 

Antwort

5

Zuerst stellen Sie sicher, dass alle .container divs sind position:absolute

Dann können Sie die folgende animate Funktion von jQuery verwenden:

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

Sowohl die divs position :relative haben sollte oder sein Sie können Ihrem beweglichen Div position: absolute für oben und links geben, um richtig zu arbeiten.