Multiple droppables on page, get ID from the one dragged from (out) jQuery

I have a problem with using multiple droppables with a class selector.

What I want to do is drag the inner div (class="widget") on any of the droppables (class="dropZone") to another dropZone, recording the id of the dropZone I just left and then when the drop finishes record the id of the dropZone I dropped on.

I also want to record the id of the draggable.

Now, all seemed to work ok until I realised that the emptyShift variable that is supposed to store the one I just came from gets written over with the id of the dropZone I just went to. Does the out: event happen twice or something? I'm sure it's just an order of events firing but I can't seem to find it...

I'm recording three variables: shiftId, colleagueId and emptyShiftId, the idea being that I can swap people around time slots by dragging one, taking the slot I came from, getting the id of the slot I've gone to and swapping the Ids of the people around so that they effectively swap shifts..

Here's my javascript:

<script type="text/javascript">
    var j$ = jQuery.noConflict();
    var shiftId;
    var colleagueId;
    var emptyShift;
    j$(document).ready(function(){
        var emptyShift;
        makeDraggable();
    });

    function makeDraggable(){
        j$('.widget').draggable({
            revert: 'invalid'
        });

        //Make  area droppable
        j$(".dropZone").droppable({
            greedy: true,
            drop: function(event, ui){ 
                j$(this).addClass('ui-state-highlight');
                shiftId = j$(this).attr('id')
                colleagueId = ui.draggable.attr('id');
                updateShift(colleagueId, shiftId, emptyShift);

                // alert("drop to: " + shiftId);
            },
            out: function(event, ui){
                j$(this).removeClass('ui-state-highlight'); 
                emptyShift = j$(this).attr('id');
                // alert("Go from: " + emptyShift); 
            } 
        });  
    }
</script>

Here's my HTML:

<table>
    <tbody>
        <tr>
            <td class="label">
                <div class="dropZone" id="a03A00000067qEDIAY">
                    <b>Start Time</b>
                    05:00
                    <div class="widget" id="a0GA000000BduVZMAZ">
                        <b>First Name</b>
开发者_JAVA技巧                        Bloggs
                        <b>Mobile No.</b>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>
<table>
    <tbody>
        <tr>
            <td class="label">
                <div class="dropZone" id="a03A00000067qE8IAI">
                    <b>Start Time</b>
                    04:00
                    <div class="widget" id="a0GA000000BduVZMHZ">
                        <b>First Name</b>
                        Jones
                        <b>Mobile No.</b>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>