jQuery draggable changing css "top" value

I have a table with two columns; names and items (represented by images).

<table>
  <tr>
    <td class='name'>bob</td> <td class='items'><img src='thing1.gif' class='item'></td>
  </tr>
  <tr>
    <td class='name'>joe</td> <td class='items'><img src='thing2.gif' class='item'></td>
  </tr>
</table>

I would like to have the user be able to drag the images from one row to another (i.e., move "thing2.gif" from joe to bob). I accomplished this with jQuery as follows:

// initialize these as draggable
$(".item").draggable({
    revert: "invalid",
    ghosting: true,
    opacity: 0.5,
});

$(".items").droppable({
    accept: ".item",
    activeClass: "drop_active",
    drop: function( event, ui ) {
        $(this).append(ui.draggable);
    }
}); 

The problem I'm encountering is that after the move, each img seems to have a acquired a new css attribute: top: ±X;, where X represents how much the image was moved vertically. I.e., if I had dragged the image up for pixels before dropping it, it would have an attribute top: -40px. This would have the effect of making it be display开发者_StackOverflow中文版ed 40 pixels above it's new row. Does anyone know how to correct for this? Or, can anyone suggest a better way to do this?

Just remove the top attribute in the drop handler.

 $(this).append($(ui.draggable).css('top',''));

For those coming form google.. you might also add:

.ui-draggable-dragging{
    top:0 !important;
}