Jquery - Move Div around

I am using Jquery Drag and drop to move divs across a page and this works perfectly. however what i would like is on each one of the div containers is to have a close button which when clicks removes the div from where it is and places it in a pre-defined div at the bottom like a widget gallery.

How would this be accomplished? - below is my html.. thanks

Chris

<div class='column' id='leftcolumn'>&开发者_开发问答lt;/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>

---

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

---

Try:

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

I dunno if the appending part will work tough.