jQuery draggable changing css "top" value

Question

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 displayed 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?

Answer 1

Just remove the top attribute in the drop handler.

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