JQuery - moving div around

Question

I use Jquery Drag and drop to move divs around the page, and this works fine. however, I would like for each of the div containers to have a close button that, when clicked, removes the div from where it is and places it in the predefined div at the bottom, like in the widget gallery.

How will this be done? - below is my html .. thanks

Chris

<div class='column' id='leftcolumn'></div> <div class='column' id='rightcolumn'> <div class='dragbox'> <span class='close'>Close</span> Content In here </div> </div> <div class='column' id='widgetgallery></div> 

Answer 1

 $('div.dragbox > span.close').click(function(){ $(this).parent().appendTo("#widgetgallery"); }); 

Answer 2

Try:

 $('.close').click(function(){ $('#widgetgallery').append($(this).parent()); $(this).parent().delete(); }); 

I don't know if the hard part will work.