User jQuery to drag a DIV and drop in a TD ... and have the DIV "snap" into place

I am finishing up a rewrite of task management system, and am in the process of adding drag and drop capabilities.

I want the user to be able to drag a task DIV from one column (TD) and drop it in another column (TD). I have this working correctly, save for some minor formatting issues. I have the TD with a class called droppable that accepts draggable classes. What I would like to happen is actually remove the task DIV from the current TD and append it to the dropped on TD.

Here is my script:

<script type="text/javascript">
    $(function() {
        $(".draggable").draggable({
            cursor: 'move',
            cancel: 'a',
            revert: 'invalid',
            snap: 'true'
        });
    });
    $(function() {
        $(".droppable").droppable({
            accept: '.draggable',
            hoverClass: 'droppable-hover',
            drop: function(event, ui) { }
        });
    });

</script>

Here is my Html:

<h3>
    My Queue</h3>
<table style="width: 100%;" class="queue">
    <tbody>
        <tr>            
            <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StagePG">                
            </td>            
            <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StageRY">                
            </td>           
            <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StagePR">                
                <div class="queue-item draggable" title="Task description goes here.">
                    <em>Customer</em>
                    <strong>Project</strong>
                    <h4><a href="/Sauron/Task/Details/100001">100001</a></h4>
                </div>

                <div class="queue-item draggable" title="Task description goes here.">

                    <em>Customer</em>
                    <strong>Project</strong>
                    <h4><a href="/Sauron/Task/Details/100002">100002</a></h4>
                </div>              
            </td>
            <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StageRT">
            </td>
            <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StageTE">
            </td>
            <td style="width: 14%; vertical-align:bottom ;" class="droppable" id="StageRL">
            </td>            
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td style="width: 14%; text-align: center;">
                Pending (0)
            </td>
            <td style="width: 14%; text-align: center;">
                Ready (0)
            </td>
            <td style="width: 14%; text-align: center;">
                In Progress (2)
            </td>
            <td style="width: 14%; text-align: center;">
                Ready for Testing (0)
            </td>
            <td style="width: 14%; text-align: center;">
                Testing (0)
            </td>
            <td style="width: 14%; text-ali开发者_高级运维gn: center;">
                Ready for Release (0)
            </td>
        </tr>
    </tfoot>
</table>

Struggling with the drop event and how to implement this. Any help is appreciated!

This example works, but it remains to be seen because the div is locatd anywhere. This works because the event is fired first "droppable" rather than "draggable"

    $(function() {

     $_dropEnd = null;

     $(".draggable").draggable({
            cursor: 'move',
            cancel: 'a',
            revert: 'invalid',
            snap: 'true',
            stop: function(event, ui) { 
               $(this).appendTo($_dropEnd);
               $_dropEnd = null;
            }
        });
    });
    $(function() {
        $(".droppable").droppable({
            accept: '.draggable',
            hoverClass: 'droppable-hover',
            drop: function(event, ui) {
               $_dropEnd = this;
            }
        });
    });

As @David Lively suggested we went with the sortable route ... did exactly what I needed it to do!