Javascript 将jQuery draggable（）元素移动到新的父级

我正在用JavaScript编写一个简单的纸牌游戏，我希望在玩的时候有一张“卡”

img

snap到它的目标。我通过将

img

从其当前父对象中移除并将其放置在新的父对象（目标对象）中来实现这一点。但是，当我将

img

放入带有jQuery的

.appendTo（）

的新容器中时，卡会卡在屏幕的一角

请参见下面的工作示例

div

在移动到新的父级时会捕捉到屏幕的一角，这有什么原因吗？我想知道当我更改

div

的父项时，是否有css属性在幕后被继承/丢失

任何帮助都将不胜感激

-编辑-

附加信息：虽然有人建议我只需将其添加到我的drop处理程序中（这很有效）-

$（ui.draggable）.css（{'top'：'0'，'left'：'0'）

我想将
.animate（）
设置到这个位置，这样捕捉就不会是瞬间的。虽然卡最终位于正确的位置，但它首先会捕捉到拐角处，然后轻松进入正确的位置。我想避免第一次撞到拐角处

$(ui.draggable).css({'top' : '0', 'left' : '0'});

抱歉，我不得不去上班，但请尝试以下方法：

$("#target").droppable({
    drop: function (event, ui) {
      var offset = $('#target').offset()
      var top = parseInt($(ui.draggable).css('top')) - offset.top;
      var left = parseInt($(ui.draggable).css('left')) - offset.left;            
      $(ui.draggable).appendTo("#target");
      $(ui.draggable).css({'top' : top, 'left' : left})
      $(ui.draggable).animate({
        top: 0,
        left: 0           
      }, 500, function() {
        // Animation complete.
      });
    }
});


抱歉，我不得不去上班，但请尝试以下方法：

$("#target").droppable({
    drop: function (event, ui) {
      var offset = $('#target').offset()
      var top = parseInt($(ui.draggable).css('top')) - offset.top;
      var left = parseInt($(ui.draggable).css('left')) - offset.left;            
      $(ui.draggable).appendTo("#target");
      $(ui.draggable).css({'top' : top, 'left' : left})
      $(ui.draggable).animate({
        top: 0,
        left: 0           
      }, 500, function() {
        // Animation complete.
      });
    }
});

感谢您的评论-这是一个完美的解决方案，可以解释我的问题最初的措辞。不幸的是，它有点复杂-请看我的编辑。谢谢你的评论-这是一个完美的解决方案，我的问题是如何第一次措辞。不幸的是，它有点复杂-请参阅我的编辑。