如何使用jQuery返回可拖动的项目到其初始位置

Question

我有一组图像放置为position:relative（显示一个接一个）。

我使用此代码拖放它们（从jQuery API文档中被盗，根据需要修改）。

$(function() { 
     $(".draggable").draggable({ 
       start: function(event, ui) { 
        // Show start dragged position of image. 
        var Startpos = $(this).offset(); 
        $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top); 
        pos_left = Startpos.left; //pos_left is global 
        pos_top = Startpos.top; //pos_top is also global 
       }, 
       stop: function(event, ui) { 
        // Show dropped position. 
        var Stoppos = $(this).offset(); 
        $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top); 
        $(this).css('position', "fixed"); //tried absolute and relative, too 
        $(this).css('left', pos_left); 
        $(this).css('top', pos_top); 
       } 
     }); 

     $(".droppable").droppable({ 
       drop: function(event, ui) { 
        id = $(this).attr('id');  
       alert(id); 
      } 
     }); 
    }); 

我想要做的是将可拖动的元素返回到它的初始位置，在用户放下它之后。但是因为我的元素相对定位，所以最初的左边，上面的坐标都是相同的（或者这是我从文档中理解的 - 我可能在这里是错误的）。因此，尽管图像会返回，但它们实际上会将每个图像堆叠在另一个之上。

我在做什么错？我应该做些什么？

Answer 1

好吧。而不是自己使用可拖动的还原选项。从jQuery UI码头：

$(".selector").draggable({ revert: true }); 

Answer 2

您可以使其位置相对，顶部= 0px和左= 0px。使用此代码为我工作：

$(function(){ 
$('#draggable').draggable().append('<a href=# class=exit>x</a>'); 
}); 
$(function(){ 
$('.exit').click(function(){ 
$('#draggable').css({ 
'top': '0px', 
'left': '0px', 
'position': 'relative' 
}); 
}); 
});