2

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

有关工作示例，请参阅此演示。

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

任何帮助，将不胜感激。

- 编辑 -

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

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

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

4

1 回答 1

4 
$(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/

于 2012-08-03T14:40:48.870 回答