jquery 애니메이션 위치 - 절대 값과 상대 값

Question

"draggable"이미지 세트의 초기 위치를 이미지의 데이터 속성으로 저장하려고합니다. 그런 다음 "putBack"버튼을 누르면 이미지가 원래 위치로 돌아갑니다. 문제는 이미지가 상대 위치로 돌아 오는 것입니다. Top & Left 대신 2XTop 및 2XLeft로 배치됩니다.

// 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를 ... 상위 li하지 img의 위치를 ​​유지하는 것처럼 보이는

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

Answer 1

. 여기에 이미지 위치를 기억하고 다시 따라 이동하는 JS 바이올린입니다 : 이것은 트릭했다

Answer 2

jsfiddle.net/ps7WN -

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