Drag&Drop in jQuery on Table Cells - jquery-ui

Question

I have a table and need to drag/drop cells containing data into blank cells. I'm able to drag and drop fine, but once a cell is dragged away, I need its "old" position to now become a droppable cell. Since the cell is dragged, I need something else to reference. I ended up wrapping each of the td elements in a div element, but all references return "undefined" on the inner cellDiv id (or return the outer tableDiv id). On the fiddle, I notice that the blue background is not appearing so I don't think the 'cellDiv' is doing much.
Next I am going to try swapping the td and cellDiv elements, but I decided to post the question first, as I've searched everywhere and cannot seem to find this specific problem addressed. Thanks for your help.
here is the problem in a jsfiddle: http://jsfiddle.net/tgsz34hx/3/
And the code:
<div id='tableDiv'>
<table>
<tr id='row1'>
<div class='cellDiv' id='r1c1'>
<td class='drop' id='col1'>Drop Here</td></div>
<div class='cellDiv' id='r1c2'>
<td class='nodrop' id='col2'>Drag Me</td></div>
</tr>
</table>
</div>
$(document).ready(function () {
var fromDiv;
$('.nodrop').draggable({
cursor: "move",
appendTo: "body",
revert: "invalid",
start: function (event, ui) {
var thisDiv = $(this).attr('id');
fromDiv = $(this).closest('.cellDiv').attr('id');
alert("thisDiv=" + thisDiv + ", fromDiv=" + fromDiv);
}
});
$('.drop').droppable({
accept: ".nodrop",
tolerance: "pointer",
snap: ".drop",
drop: function (event, ui) {
var parenttd = $(ui.draggable).closest('td').attr('id');
var parentdiv = $(ui.draggable).closest('.cellDiv').attr('id');
// alert("parenttd=" + parenttd + ", parentdiv=" + parentdiv);
$(this).removeClass('drop');
$(this).addClass('nodrop');
$(this).droppable('option', 'disabled', true);
}
});
});
#tableDiv {
background-color: grey;
}
#tableDiv td {
background-color: red;
}
#tableDiv div {
background-color: blue;
}