拖放表格单元格中的jQuery

Question

我有一张桌子，需要将包含数据的单元格拖放到空白单元格中。我能够拖放得很好，但是一旦细胞被拖走，我就需要它的老了＃34;位置现在变成一个可放置的单元格。由于单元格被拖动，我需要其他东西来引用。我最终将每个td元素包装在div元素中，但所有引用都返回＆＃34; undefined＆＃34;在内部cellDiv id（或返回外部tableDiv id）。在小提琴上，我注意到蓝色背景没有出现，所以我不认为＆＃39; cellDiv＆＃39;做得很多

接下来我将尝试交换td和cellDiv元素，但我决定先发布问题，因为我已经到处搜索，似乎无法找到解决这个问题的具体问题。谢谢你的帮助。

这是jsfiddle中的问题：http://jsfiddle.net/tgsz34hx/3/ 代码：

<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（＆＃34; parenttd =＆＃34; + parenttd +＆＃34;，parentdiv =＆＃34; + 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;
}