JQuery заменить ячейки таблицы на сопротивлении/падение

Question

скрипки: http://jsfiddle.net/macbeth3n1/5sdzsL3d/3/

При перемещении ячейки (дела) в сбрасываемый (тд), мне нужно заменить и/или добавлять ячейки в своих новых позициях. Однако при добавлении div не размещается на экране, где я хочу его (то же место, что и предыдущие данные), а на replaceWith он полностью исчезает. Пожалуйста, см. Скрипку для кода. Помогите!!

<table> 
    <tr> 
    <td class="drop" id="tdClass1"> 
     <div class="empty"></div> 
     <input type="hidden" id="input1" /> 
    </td> 
    <td class="drop" id="tdClass2"> 
     <div class="drag">Class 2</div> 
     <input type="hidden" id="input2" /> 
    </td> 
    </tr> 
    <tr> 
    <td class="drop" id="tdClass3"> 
     <div class="drag">Class 3</div> 
     <input type="hidden" id="input3" /> 
    </td> 
    <td class="drop" id="tdClass4"> 
     <div class="empty"></div> 
     <input type="hidden" id="input4" /> 
    </td>   
    </tr>    
</table> 

$(document).ready(function() { 
    $('.drag').draggable ({ 
    cursor: "move", 
    appendTo: "body", 
    revert: "invalid", 
    opacity: 0.5 
    }); 

    $('.drop').droppable({ 
    accept: ".drag", 
    tolerance: "pointer", 
    snap: ".drop", 

    drop: function (event, ui) { 

     ui.draggable.position({ 
      of: $(this), 
      my: 'left top', 
      at: 'left top' 
     }); 

     ui.draggable.draggable('option', 'revert', 'invalid'); 

     var parentTd=$(ui.draggable).closest('td'); 
     var parentDiv=$(ui.draggable).closest('div'); 
     var thisDiv = $(this).find('div'); 
     var emptyDiv=$('<div class="empty"></div>'); 

     alert ("thisTdId=" + $(this).attr('id') + 
       ", parentTdId=" + parentTd.attr('id')); 

     thisDiv.replaceWith(ui.draggable); 
     parentDiv.append(emptyDiv); 
    } 
    }); 
}); 

Answer 1

Это то, что вы пытаетесь достичь правильно?

$(document).ready(function() { 

    $('.drag').draggable ({ 
     cursor: "move", 
     appendTo: "body", 
     revert: "invalid", 
     opacity: 0.5 
    }); 

    $('.drop').droppable({ 
     accept: ".drag", 
     tolerance: "pointer", 
     snap: ".drop", 

     drop: function (event, ui) { 
      console.log(event, ui); 
      $(this).append(ui.draggable); 
      ui.draggable.css({top:0, left:0}); 
     } 
    }); 
});