... di una tabella dopo un drag&drop.

Ciao a tutti,
ho bisogno del vostro aiuto.
Io ho una tabella (per comodità riporterò il codice di una tabella monoriga con 2 celle).
La prima cella è occupata (caratterizzata dal colore rosso) dall'elemento che posso spostare tramite drag&drop, mentre la seconda è vuota (caratterizzata dal colore verde).
Vorrei riuscire, una volta effettuato, il drag&drop a cambiare lo stile della cella in modo che diventi rossa dove è presente l'elemento e verde dove non c'è.

Un esempio di codice è il seguente:

<SCRIPT src="http://threedubmedia.com/inc/js/jquery-1.4.2.min.js"></SCRIPT>
<SCRIPT src="http://threedubmedia.com/inc/js/jquery.event.drag-2.0.min.js"></SCRIPT>
<SCRIPT src="http://threedubmedia.com/inc/js/jquery.event.drop-2.0.min.js"></SCRIPT>
<SCRIPT src="http://threedubmedia.com/inc/js/excanvas.min.js"></SCRIPT>

<STYLE>
.drag{
margin: auto;
text-align: center;
width: 87px;
height: 35px;
line-height: 35px;
border: 2px solid SteelBlue;
background-color: white;
}

.cella{
background-color: #FF3300
}</STYLE>

<SCRIPT type=text/javascript>
jQuery(function($){
$('.drag')
.click(function(){
$( this ).toggleClass("selected");
})
.drag("init",function(){
if ( $( this ).is('.selected') )
return $('.selected');
})
.drag("start",function( ev, dd ){
$( this ).css('opacity',.75);
})
.drag(function( ev, dd ){
$( this ).css({
top: dd.offsetY,
left: dd.offsetX
});
})
.drag("end",function( ev, dd ){
$( this ).css('opacity','');
});
$('.drop td')
.drop("start",function(){
$( this ).addClass("active");
})
.drop(function( ev, dd ){
$( this ).toggleClass("dropped");
})
.drop("end",function(){
$( this ).removeClass("active");
});
$.drop({ multi: true });

});
</SCRIPT>

<SCRIPT type=text/javascript>
jQuery(function($){
var $div = $('#container');
$('.drag')
.drag("start",function( ev, dd ){
dd.limit = $div.offset();
dd.limit.bottom = dd.limit.top + $div.outerHeight() - $( this ).outerHeight();
dd.limit.right = dd.limit.left + $div.outerWidth() - $( this ).outerWidth();
})
.drag(function( ev, dd ){
$( this ).css({
top: Math.min( dd.limit.bottom, Math.max( dd.limit.top, dd.offsetY ) ),
left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )
});
});

});
</SCRIPT>

<DIV id=container>
<table id="table-1" width=300 height=150 border=1 class=drop>
<tr>
<td class=cella width=50>
<DIV class=prova>&nbsp
<DIV class=drag>
One
</DIV>
</DIV>
</td>

<td width=50 class=cambio><DIV class=prova2><DIV class=drop>&nbsp</DIV></DIV></td>
</tr>
</table>
</div>

<STYLE type=text/css>.drag {
POSITION: absolute; CURSOR: move;
}
.selected {
BORDER-BOTTOM-COLOR: #b98; BACKGROUND-COLOR: #ecb; BORDER-TOP-COLOR: #b98; BORDER-RIGHT-COLOR: #b98; BORDER-LEFT-COLOR: #b98
}
#container {
HEIGHT: 150px; WIDTH: 300px;
}
.drop {
FLOAT: right; TABLE-LAYOUT: fixed;
}
.drop TD.cambio{
TEXT-ALIGN: center; BACKGROUND: #99FF00;
}
TD.dropped {
BORDER-BOTTOM-COLOR: #b89; BACKGROUND-COLOR: #FF3300; BORDER-TOP-COLOR: #b89; BORDER-RIGHT-COLOR: #b89; BORDER-LEFT-COLOR: #b89
}
</STYLE>


Avendo però settato il colore iniziali del td di classe cambio non mi viene modificato con td.dropped. Cambia solo se muovo l'oggetto nella cella a sinistra (ora non si vede perché il colore del td.dropped è rosso come quello della cella occupata).

Esiste un modo per farlo? Io ormai non so più dove sbattere la testa