JQuery-UI draggable reset to original position

jquery-ui draggable droppable
user2110966 picture user2110966 · Mar 4, 2013 · Viewed 21.9k times · Source

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 */
});

Answer

craig picture craig · Feb 16, 2014

I used this on a project

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

did the trick for me

Related questions

jQuery UI remove element when dropped into a div using .droppable

I'm trying to figure out the logic of how to do this. I have many images with only a CSS class name, they are created dynamically. These images are draggable using jQuery UI's .draggable. I need to have a "trash …

Read More
jquery draggable stop event

I have searched a lot of.But I can't find answer.Maybe dublicate.Here is a bit of my code: $(".box").draggable({ revert:"invalid", stop:function(ev,ui){ //if(dropped) alert(ui.item.attr("id"); //else alert("Not dropped"); } }); $(".box").…

Read More
How to check if an element is droppable, draggable or other 'ble'?

I've got a bunch of elements with jQuery. Some are draggable, some are droppable and some are both. How can I detect if an element is draggable or droppable?

Read More