2012-03-27 173 views
0

我想將一組「可拖動」圖像的初始位置存儲爲圖像中的數據屬性。然後當按下「putBack」按鈕時,圖像將返回到其原始位置。問題是圖像返回到相對位置。而不是頂部&左邊,他們被定位到2XTop和2XLeft。jquery動畫位置 - 絕對vs相對

// 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> 

三網融合

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

可以添加你的HTML也? – 2012-03-27 18:08:57

回答

1

它看起來像你保持父li不是img的位置。下面是記住圖像中的位置,並將其移回相應的一個js小提琴:jsfiddle.net/ps7WN

+0

關閉,但仍未返回到原始位置。認爲動畫也有問題。 – 2012-03-27 18:22:30

+0

這可能不是一個動畫問題,而是元素的CSS定位。你能發佈相關的CSS嗎? – jeremyharris 2012-03-27 18:42:44

+0

就定位而言,沒有相關的CSS。 – 2012-03-27 18:49:05

0

這奏效了 -

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