jQuery UI, draggable - position problem when hiding parent

I've got an idea for a UI which is something along the lines of this:

1. There's a hidden container with draggable items.
2. User clicks something to show the container.
3. User can drag an item from the ontainer out onto a "main area".
4. When an item is dragged out from the container the container with the rest of the items should go back to being hidden.

I've gotten as far as per the code below, however I've run into a problem, which I can't work out how to get around.

When the parent container of the item, gets hidden, the item get's hidden as well. Plus with the slide effect, the positioning of the item get's effected as well.

Any thoughts or ideas on how I could solve this would be most welcome :) And if I'm on the wro开发者_如何学编程ng track all togheter, feel free to point in the right direction :)

Thanks in advance, Ola

<style>
#container{ background-color: red; width:300px; height:200px; position:absolute; left: 200px; top:200px; display: none;}
#draggable1 {background-color: blue; width:100px; height:50px;}
#draggable2 {background-color: green; width:100px; height:50px;}
</style>

<div id="container">
<p>Original Container</p>
<div id="draggable1" class="draggable">
    <p>Draggable1</p>
</div>
<div id="draggable2" class="draggable">
        <p>Draggable2</p>
    </div>
</div>


<div id="showContainer">Show Container</div>

<script type="text/javascript">
    $(function () {
        //Click to show the container
        $("#showContainer").click(function () {
            //Call function to toggle the visibillity of the container
            toggleContainer();
        });

        //Set the draggable elements
        $(".draggable").draggable();

        //Set the container as a drop target, to be able to get the event of when 
        //the draggable leaves the container
        $("#container").droppable();

        //Bind to the event of the darggable element leaving the droppable area
        $("#container").bind("dropout", function (event, ui) {
            //When draggable element is dragged outside of container, hide it
            toggleContainer();
        });

        //function to toggle the visibillity of the container
        function toggleContainer() {
            //Animating the toggling of visibillity with a slide effect
            $("#container").toggle('slide', { direction: 'down' });

        };


    });

---

I think the best way to do this is to use a cloned helper, which gets attached to the body while the item is dragged. To keep the illusion of dragging the original item, you can play with the opacity of the item when dragging starts and stops.

$(".draggable").draggable({
    helper: 'clone', // Use a cloned helper
    appendTo: 'body', // Append helper to body so you can hide the parent
    start: function(){
        // Make the original transparent to avoid re-flowing of the elements
        // This makes the illusion of dragging the original item
        $(this).css({opacity:0});
    },
    stop: function(){
        // Show original after dragging stops
        $(this).css({opacity:1});
    }
});

Try a demo: http://jsfiddle.net/HCVUd/

The only thing that's left to do now is to handle when an item is dropped outside the container. As we're using a helper, the item disappears when dragging stops. Apart from this limitation, draggables and droppables behave correctly while dragging.