как вернуть перетаскиваемый элемент в исходное положение с помощью 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

Вы можете сделать его положение относительным, top = 0px и left = 0px.У меня работал с этим кодом:

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