Drop draggable on collapsed div

Question

My goal is to be able to take a draggable item and drop it on a collapsed div. When the item is dropped it will be appended to a div that is within the collapsed div.

Put simply, dropping on 'outter_collapsed' will place the item in 'inner'

<div id = "outter_collapsed">
<div id = "inner">
<!-- DROPPED ITEM PLACED HERE -->
</div>
</div>

Any ideas on how you would approach this or possible words of wisdom are welcome.

Thank you

score 0 · Accepted Answer · answered May 04 '12 at 03:43

0

Something like this maybe:

$( "#another-div" ).draggable();
        $( "#outter_collapsed" ).droppable({
            drop: function( event, ui ) {
                $(this).children().append(ui.draggable);

            }
        });

Check out an example here - http://jsfiddle.net/Bfa9v/19/

answered May 04 '12 at 03:43

kmb64

1,513
2
17
29

Now what if the item that is being dropped on "outter_collapse" is a sortable item? – Anti-Commander May 04 '12 at 21:27
nothing much it will still work. just add $( "#another-div" ).sortable(); – kmb64 May 05 '12 at 22:34

Drop draggable on collapsed div

1 Answers1