jquery动画位置-绝对与相对

我想将一组“可拖动”图像的初始位置存储为图像中的数据属性。然后，当按下“放回”按钮时，图像将返回其原始位置。问题是图像返回到相对位置。它们被定位为2XTop和2XLeft，而不是Top和Left

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

---

看起来您保持的是父级

li

的位置，而不是

img

。这里有一个js提琴，它可以记住图像的位置并相应地将它们移回原位：

这就成功了-

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

---

关闭，但仍无法返回到原始位置。我认为动画也有问题。动画可能没有问题，但元素的CSS定位有问题。你能发布相关的CSS吗？就定位而言，没有相关的CSS。如果你移动图像，你的动画设置是错误的。看见

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