jquery animate position - absolut vs relativ

Question

Ich möchte die ursprüngliche Position einer Reihe von "ziehbaren" Bildern als Datenattribute im Bild speichern. Wenn dann eine "putBack" -Taste gedrückt wird, kehren die Bilder zu ihrem Ursprungsort zurück. Problem ist, dass Bilder zu einer relativen Position zurückkehren. Statt Top & Links sind sie zu 2XTop und 2XLeft positioniert.

// assign data attributes x,y data attributes  
    $('li img').each(function(index) { 
     $(this).data("Left", $(this).parent().position().left) 
       .data("Top", $(this).parent().position().top);  
     console.log($(this).data("Top")); 
    }); 

    // button to put images back where they started 
    $("#putBack").bind('click', function() { 
     $('li img').each(function(index) { 

     console.log($(this).data("Top")); 
      $(this).parent().animate(
        { "left": $(this).data("Left"), 
          "top": $(this).data("Top") 
        }, "slow");      
     }); 

    }); 

html ...

<ul> 
<li id='apple'><img src="images/apple.png"/></li> 
<li id='bread'><img src="images/bread.png"/></li> 
<li id='banana'><img src="images/banana.png"/></li> 
<li id='hot_dog'><img src="images/hot_dog.png"/></li> 
<ul> 

css ...

ul{ 
    width:100px; 
    padding:0px; 
    list-style:none; 
    font-size:20px; 
} 

Answer 1

Es ist wie Sie die Position der Eltern halten sind sieht li nicht die img. Hier ist eine js Geige, die die Bilder Positionen erinnert und verschiebt sie entsprechend zurück: jsfiddle.net/ps7WN

Answer 2

Dieser der Trick -

$(document).ready(function(){ 
    $('li').draggable({ 
      // revert: true, 
      cursor: 'pointer', 
      opacity: .4, 
      containment: 'document' 
    }); 


    // turn on and off dragging 
    $('.toggle').click(function() { 
     if ($("li").draggable("option", "disabled") == true){ 
      $("li").draggable("option", "disabled", false);    
      $('.toggle').val('Prevent Draggable'); 
     } 
     else{ 
      $("li").draggable("option", "disabled", true);    
      $('.toggle').val('Allow Draggable'); 
     } 
    }); 

    // assign data attributes x,y data attributes  
    $('li img').each(function(index) { 
     $(this).data("Left", $(this).parent().offset().left) 
       .data("Top", $(this).parent().offset().top);  
     console.log($(this).data("Top")); 
    }); 

    // button to put images back where they started 
    $("#putBack").bind('click', function() { 
     $('li img').each(function(index) {      
      $(this).parent().animate(     
       { "left": 0, 
         "top": 0 
       }, "slow");      
     }); 
    }); 
});