javascript - 将 jQuery draggable() 元素移动到新父元素

Question

我正在用 JavaScript 编写一个简单的纸牌游戏，我希望在玩游戏时让一张“纸牌”img 捕捉到它的目标。我通过从其当前父级中删除 img 并将其放置在新父级(目标)中来完成此操作。但是，当我使用 jQuery 的 .appendTo() 将 img 放入其新容器中时，卡片会捕捉到屏幕的一 Angular 。

查看此 demo一个工作示例。

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

如有任何帮助，我们将不胜感激。

- 编辑 -

附加信息:虽然有人建议我将其简单地添加到我的放置处理程序中(有效)-

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

我想 .animate() 到这个位置，所以捕捉不是瞬间的。虽然卡片确实位于正确的位置，但它首先会卡到 Angular 落，然后轻松进入正确的位置。我想避免第一次捕捉到 Angular 落。

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/