JQuery-UI draggable reset to original position

Question

This is probably very easy to do, but I always think too complicated.

I've just set up a simple test with #draggable / #droppable with a fixed width/height + float:left.

I then want a reset button to be able to reset the #draggable to it's original state after it's been snapped to a #droppable. (bottom line)

$(document).ready(function() {

    $("#draggable").draggable
    ({  
        revert: 'invalid',
        snap: '#droppable',
        snapMode: 'corner',
        snapTolerance: '22'

    });
});

    $("#droppable").droppable
    ({
        accept: '#draggable', 
        drop: function(event, ui) 
        {
            $(this).find("#draggable").html();
        }
});

    $(".reset").click(function() {
    /* What do I put here to reset the #draggable to it's original position before the snap */
});

score 21 · Answer 1 · edited Feb 16 '14 at 14:10

21

I used this on a project

$("#reset").click(function () {
    $(".draggable-item").animate({
        top: "0px",
        left: "0px"
    });
});

did the trick for me

edited Feb 16 '14 at 14:10

Rahil Wazir

10,007
11
42
64

answered Feb 16 '14 at 13:49

craig

211
2
2

I used a combination of this and getting the original coordinates from the other answer rather than setting it back to 0,0. – Sinister Beard May 04 '16 at 11:23
this is excellent for none absolute positions looks real nice to! – chrispepper1989 Sep 13 '17 at 14:44

score 13 · Accepted Answer · answered Mar 04 '13 at 02:38

13

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, though:

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

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

http://jsfiddle.net/ExplosionPIlls/wSLJC/

answered Mar 04 '13 at 02:38

Explosion Pills

188,624
52
326
405

Seems to be what I need. However, when I add $("#draggable").data({'originalLeft': $("#draggable").css('left'), 'origionalTop': $("#draggable").css('top') }); The draggable stops working – user2110966 Mar 04 '13 at 02:52
@user2110966 I think your comment is incomplete? – Explosion Pills Mar 04 '13 at 02:53
I edited it, sorry about that. "The draggable stops working". I even tried to just copy/paste the entire thing. That's weird, as it clearly works on the demo. – user2110966 Mar 04 '13 at 02:55
@user2110966 hard to say without seeing the rest of your code / website – Explosion Pills Mar 04 '13 at 02:56
http://jsfiddle.net/6TNeZ/3/ that's basically it.. Tried looking for errors, but couldn't find any. – user2110966 Mar 04 '13 at 03:06
I see an error; you were not closing the string on `'#droppable`: http://jsfiddle.net/ExplosionPIlls/6TNeZ/4/ – Explosion Pills Mar 04 '13 at 03:10
Oh.. Now I feel stupid. Thanks a lot for your help, very much appreciated. – user2110966 Mar 04 '13 at 03:19
Worked like a charm! – Jagger Sep 19 '17 at 14:05

score 7 · Answer 3 · answered Nov 15 '16 at 15:19

7

I've just had great success with the following:

$(".draggable-item").removeAttr("style");

answered Nov 15 '16 at 15:19

h0dges

663
7
15

This answer did help me, but it also removes the 'position: relative', causing the next drag action to not animate in the original way. – MeanGreen May 25 '20 at 07:20

score 3 · Answer 4 · answered Jun 15 '18 at 22:34

I found that the following was the simplest way to reset to original position, but if you want the item to remain draggle this will not work alone

$(".draggable-item").removeAttr('style');

This worked for me to reset to original position and keep item draggable:

$("#reset").click(function () {
    // Reset position
    $(".draggable-item").removeAttr('style');

    // Destroy original draggable and create new one
    $(".draggable-item").draggable("destroy");
    $(".draggable-item").draggable();
});

score 2 · Answer 5 · answered Nov 18 '16 at 12:50

I used h0dges' basic idea. The balls I created returned to their original positions, but I lost the styles that made them into balls. Therefore, I kept the styles of the balls and just reset their top and left styles to return them to their original positions:

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

Junaid Ali · Answer 6 · 2020-07-15T23:45:05.403

0

I don't know exactly what people wish to see but I have made a fiddle about resetting objects to initial positions on a single click either vertical or horizontal.Fiddle https://jsfiddle.net/JunaidAli/wp1n796q/321/

edited Jul 15 '20 at 23:45

answered Jul 15 '20 at 23:09

Junaid Ali

361
2
9

JQuery-UI draggable reset to original position

6 Answers6

Linked