как вернуть перетаскиваемый элемент в исходное положение с помощью jquery

Question

У меня есть набор изображений, размещенных как position:relative (показывая один рядом друг с другом).

Я использую этот код, чтобы перетащить их (украденные из документации API jQuery, модифицированные для моих нужд).

$(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

Хорошо. Вместо того, чтобы делать это самостоятельно, используйте опцию revert перетаскиваемого. Из доков 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' 
}); 
}); 
});