jQuery UI - Revert a jQuery draggable object back to its original?

In HTML file, I would like to drag one item and dropped to the target,suppose I would like to drop another item to the same position, at that time both items should be override.If both items are overrides the new item should be revert to original position.Can any one help me how to revert the new item to the original position. Here is my code.

<!-- language: lang-js -->

$(function () {
    $(".draggable2").draggable({
        revert: "invalid"
    });
    $("#droppable").droppable({
        drop: function () {
            //var xPos = offset.left;
            //var yPos = offset.top;    
            //alert( $(this).position().left ); 		
            $(this).find("p").html("Yes,it is dropped!");
        }
    });
});

JSFiddle is : here

-Thanks.

You need to enable droppable on the objects you intend to drag and use revert there.

Like this:

<!-- language: lang-js -->

$(".draggable2").droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function (event, ui) {
        ui.draggable.draggable('option', 'revert', true);
    }
});

See this fiddle for a demo

Also see this SO question