将 jQuery Draggable() 元素移动到新的父元素

Question

我正在用 JavaScript 编写一个简单的纸牌游戏，我希望img在玩游戏时有一张“纸牌”捕捉到它的目标。我通过img从当前父级中删除 并将其放置在新父级（目标）中来实现此目的。然而，当我将 放入img带有 jQ​​uery 的新容器中时.appendTo()，该卡会捕捉到屏幕的一角。

请参阅此演示以获取工作示例。

当它移动到新的父级时，是否有原因会div捕捉到屏幕的一角？我想知道当我更改 的父项时是否有 css 属性在幕后被继承/丢失div。

任何帮助，将不胜感激。

- 编辑 -

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

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

我想要.animate()这个位置，所以快照不是瞬时的。虽然卡片最终到达了正确的位置，但它首先会卡到角落，然后慢慢进入正确的位置。我想避免第一次撞到角落。

Answer 1

$(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.
      });
    }
});

http://jsfiddle.net/hsjvP/22/