Reset jquery draggable object to original position by clicking a button

Question

I want to reset some draggable objects to its original position by clicking a button. i can move and find current position. But how to reset them by clicking "Reset" button? It is all inside a container. Can anyone help me?

Check this FIDDLE

var coordinates = function(element) {
    element = $(element);
    var top = element.position().top;
    var left = element.position().left;
    $('#results').text('X: ' + left + ' ' + '   Y: ' + top);
}


$('#custombox').draggable({ containment: "#containment-wrapper", scroll: false,
            start: function() { 
                coordinates('#custombox');
                        },
         stop: function() {
                coordinates('#custombox');
                    }

        });

$('#logo').draggable({ containment: "#containment-wrapper", scroll: false,
            start: function() { 
                coordinates('#logo');
                        },
         stop: function() {
                coordinates('#logo');
                    }

        });
 $("#logo").resizable({ containment: "#containment-wrapper", scroll: false,maxHeight: 250, maxWidth: 350, minHeight: 50, minWidth: 50 });

on clicking reset, do you want to trace back the previous stops made or directly reset the position to the first position it started with? — VJS, Nov 14 '13 at 08:42

VJS · Accepted Answer · 2013-11-19T12:11:46.767

3

Assuming you want to trace back the steps.

I pushed the positions onto a stack and pop and retrieve the previous positions on click of reset buton.

$("#previousPos").on('click', function(){
    var pos = posStack.pop();
    $('#logo').css("left", pos.x);
    $('#logo').css("top", pos.y);
});

check the fiddle

----- Edit ---- Fixing the coordinate issue

New fiddle

edited Nov 19 '13 at 12:11

answered Nov 14 '13 at 09:02

VJS

1,017
9
21

Yep. Thats what i want. Thanks.... But one problem happened. The coordinates displaying under went wrong. Any chance to fix that? – Arjun Nov 14 '13 at 11:52
I took the same code that you wrote for coordinates display. I can take a look at it if you like. If the solution helped you, please mark it as the answer. – VJS Nov 15 '13 at 16:32
it definitely helped. Can you check for the co-ordinate problem also? – Arjun Nov 19 '13 at 08:02
Is it OK now? if not let me know the problem. – VJS Nov 19 '13 at 12:12
its almost correct. But what i was looking for is when reset is clicked, it must go to first position, not the last (how it was before change position). Is it impossible to do in such a way? – Arjun Nov 30 '13 at 05:03
What do you mean "how it was before change position"? I clearly asked you whether you want to trace back the steps? And you said yes. On clicking reset again and again, it will trace back the steps. – VJS Dec 02 '13 at 08:47
It is my mistake? can you help me once again? – Arjun Dec 02 '13 at 10:33
Just pop out the whole stack and use the first value. – VJS Dec 02 '13 at 10:53
nope. i didn't notice the check image. im totally new to stackoverflow. thats why. but i gave 1 up. now i marked and please edit the fiddle for me. i agree, it was my mistake. – Arjun Dec 03 '13 at 05:47

score 1 · Answer 2 · answered Nov 18 '16 at 12:55

For my project, I have 9 elements that need to return to their original positions. I discovered that I didn't have to track their original positions in order to reset them. I simply reset the CSS top and left styles to blank values, and they reset to their original positions.

function endRound() {
    $(".ball").css({"top":"", "left":""});
}

score -1 · Answer 3 · answered Nov 14 '13 at 07:14

-1

Draggable items don't keep track of their original position that I know of; only during drag and to be snapped back. You can just do this on your own like this:

ex:

 $("#draggable").data({
    'originalLeft': $("#draggable").css('left'),
    'origionalTop': $("#draggable").css('top')
});

$(".reset").click(function() {
    $("#draggable").css({
        'left': $("#draggable").data('originalLeft'),
        'top': $("#draggable").data('origionalTop')
    });
});

answered Nov 14 '13 at 07:14

Jayanth Ramachandran

7,686
2
13
13

1

copied from this question - http://stackoverflow.com/questions/15193640/jquery-ui-draggable-reset-to-original-pos ? – VJS Nov 14 '13 at 08:31

Reset jquery draggable object to original position by clicking a button

3 Answers3