Restricting sorting to predefined containers

Restricting sorting to predefined containers

I have a container div, which contains two div rows. Within each of these rows, I have 3 box divs. I'm trying to use the UI sortable plugin to allow users to drag/drop the boxes but limit them to only being able to drop the box ontop of where another box is.
 
All the examples I can find are fluid in that they restrict you to a container but within that you can have them anywhere, e.g. you can have all the boxes in one row/column. I want to keep the layout consistent, essentially limiting the layout to a 2x3 look.
 
So if I take a box from the bottom row and drag it up to the top, one of the boxes from the top will drop down to the bottom to maintain the 2x3 layout.
 

  1. <div id="container">

    <div class="boxes_row">

    <div id="box_announcements" class="box">

    <div class="box_header"><h3>Announcements</h3></div>

    </div>

    <div id="box_services" class="box">

    <div class="box_header"><h3>Services</h3></div>

    </div>

    <div id="box_help" class="box">

    <div class="box_header"><h3>Help and Support</h3></div>

    </div>

    </div>

    <div class="boxes_row">

    <div id="box_news" class="box">

    <div class="box_header"><h3>News</h3></div>

    </div>

    <div id="box_search" class="box">

    <div class="box_header"><h3>Search</h3></div>

    </div>

    <div id="box_calendar" class="box">

    <div class="box_header"><h3>Calendar</h3></div>

    </div>

    </div>

    </div>