jQuery UI - how to restore the dropped draggable

Question

I have 3 Divs which I can drag to an image of a trash can. Once the user releases the mouse the Div is dropped otherwise it is reverted to its original location, here's my code:

<div id="draggables">
    <div id="d1">
        <header>A</header>
    </div>
    <div id="d2">
        <header>B</header>
    </div>
    <div id="d3">
        <header>C</header>
    </div>
</div>


<img src="trash.jpg" id="trash" class="semitransparent" />

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<script>

$(function(){
    // draggables...

    $("#d1,#d2,#d3").draggable({
        revert:"invalid"
    });

    $("#trash").droppable({

        activeClass:"opaque",
        drop: function(event, ui){

            ui.draggable.fadeOut(function(){
                ui.draggable.remove();

            });
        }

    });

});

I also apply an activeClass to the image of the trashcan so the user realises that they can drag / the functionality is active. However I'd like to extend my code so when a Div is dropped it's restored to its original position within the "draggables" Div. I'm unsure whether to use a helper clone on the draggable elements or within the function somehow append to the "draggables" Div. Does anyone have any advice? Is there a method like : ui.draggable.restore(); I can use?

If my wording is bad please let me know and I'll rephase the question.

Answer 1

I think you are looking for the revert option:
http://jqueryui.com/demos/draggable/#option-revert

Answer 2

Apart from the fact that the image doesn't want to be a droppable, the script seems to work...

See this JSFiddle.