jquery动画位置 - 绝对vs相对

问题描述：

我想将一组“可拖动”图像的初始位置存储为图像中的数据属性。然后当按下“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; 
}

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

答

它看起来像你保持父li不是img的位置。下面是记住图像中的位置，并将其移回相应的一个js小提琴：jsfiddle.net/ps7WN

关闭，但仍未返回到原始位置。认为动画也有问题。 – 2012-03-27 18:22:30

这可能不是一个动画问题，而是元素的CSS定位。你能发布相关的CSS吗？ – jeremyharris 2012-03-27 18:42:44

就定位而言，没有相关的CSS。 – 2012-03-27 18:49:05

答

这奏效了 -

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

jquery动画位置 - 绝对vs相对

相关推荐