jquery - jQuery のドラッグ アンド ドロップ後に DOM を読み取る

Question

良い一日！
jQueryを使用してドラッグアンドドロップを行い、その後DOMを読み取ろうとしました。ドロップ機能では、append() メソッドを使用して、ドラッグ可能なものを新しい場所に追加します。ただし、append() メソッドが終了するのではなく、drop() メソッドが終了した後にのみ、ドラッグ可能オブジェクトが古い場所から削除される可能性があります。奇妙に聞こえるかもしれませんが、ここに例を示します。これが私のJavaScriptです：

<code>

    $(document).ready(function(){

                    $('div.drag').draggable({
                        helper : 'clone',
                        opacity : 0.3
                    });

                    $('td.cell').droppable({
                        accept : function(draggable){                       
                            if($(this).find('.drag').length > 0){
                                return false;
                            }
                            return true;
                        },
                        drop : function(event, ui) {
                            $(this).append(ui.draggable);                           

                            $('#myTable').change();
                        }

                    });

                    $('#myTable').change(function() {
                        var table = document.getElementById('myTable');
                        var trList = table.getElementsByTagName('tr');

                        var resultString = '';
                        for (var i=0; i < trList.length; i++)
                        {
                            var tdList = trList[i].getElementsByTagName('td');
                            for (var j=0; j < tdList.length; j++)
                            {
                                if(tdList[j].getElementsByTagName('div').length > 0){
                                    resultString+='row' + i + ' column ' + j + ';';
                                }                           
                            }

                        }

                        $('#result').text(resultString);
                    });
                });

<code>

これが私のhtmlスニペットです：

<code>


<div class="drag">drag me</div>
    <table id="myTable" border="1" cellpadding="0" cellspacing="0">
        <tr>
            <td class="cell">&nbsp;</td>
            <td class="cell">&nbsp;</td>
            <td class="cell">&nbsp;</td>                
        </tr>
        <tr>
            <td class="cell">&nbsp;</td>
            <td class="cell">&nbsp;</td>
            <td class="cell">&nbsp;</td>                
        </tr>
        <tr>
            <td class="cell">&nbsp;</td>
            <td class="cell">&nbsp;</td>
            <td class="cell">&nbsp;</td>                
        </tr>
    </table>


    <div id="result"></div>

<code>

そのため、ドラッグすると、結果の div だけに新しい位置はありませんが、前の位置も存在します!

どうすれば回避できますか？