Javascript 设置将一个td移动到另一个td的动画

我使用jquery更改表的td内容。我想将一个td的内容“移动”到另一个td，替换现有内容

例如：

|A | B |
|C|D|

现在我“将D的内容移动到A”并获得：

|D|B|
|C||

如何设置此过渡的动画？淡出/淡入很容易，但如何在视觉上将D移动到A

非常感谢

更新：

---

我需要通过编程来完成，所以用户拖放不是一个选项

您需要将内容包装在td中的

，并获得A和D单元格的绝对位置

$（element）.offset（），并使用
.animate（）
移动它。之后，您需要删除隐藏div，并在新单元格中移动div替换

$(function(){
    var posF = $('#first').offset();
    var posS = $('#second').offset();

    $('#second').css({
        position: 'absolute',
        top: posS.top, 
        left: posS.left
    });

    $('#first').fadeOut(function(){
         $(this).remove();   
    });

    $('#second').animate({
        top: posF.top, 
        left: posF.left
    }, 1000);
});

您应该移动
标记。

这是我的密码：

<table>
    <tr>
        <td id="moveto">A</td>
        <td>B</td>
    </tr>
     <tr>
        <td>C</td>
        <td id="movefrom">D</td>
    </tr>

</table>
<input type='button' id='change'value='change'>

}))
 这里有一种方法：

创建一个克隆
DIV
并附加
TD
将克隆定位在
TD
D
将克隆动画设置到A位置
清空A，附加克隆内容并删除克隆
类似这样的内容：（演示：）

var$d=$（'.tdd'）
变量$a=$（'.tda'）
var offsetD=$d.offset（）
var offsetA=$a.offset（）
变量$clone=$（''）
.addClass（“克隆”）
.append（$d.contents（））
.css（抵销）
.appendTo（'正文'）
$clone.animate（offsetA，function（）{
$a.empty（）.append（$clone.contents（））
$clone.remove（）
})
您还可以使用HTML5拖放。。。通过删除新的拖放事件中的旧元素。如果不使用HTML拖放，您必须侦听mousedown/mouseup事件，并查看事件对象中的目标。“移动”与用户拖放或动画中的“移动”相同？
$(function() {
 $('#change').click(function(){
  $( "#movefrom" ).animate({
    left: "-=16",  //you should change this numbers based on your table size
    top: "-=22",
 }, 5000, function() {
// Animation complete.
 });

 });

var $d = $('.tdd')
var $a = $('.tda')
var offsetD = $d.offset()
var offsetA = $a.offset()
var $clone = $('<div>')
    .addClass('clone')
    .append($d.contents())
    .css(offsetD)
    .appendTo('body')
$clone.animate(offsetA, function() {
    $a.empty().append($clone.contents())
    $clone.remove()
})