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:

Answer 1

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":""});
}

Answer 2

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/

Answer 3

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/

Answer 4

I used this on a project

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

did the trick for me

Answer 5

I've just had great success with the following:

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

Answer 6

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();
});