Question

我正在用JavaScript编写一个简单的纸牌游戏，并且我希望在玩游戏时将“卡片”img与其目标对齐。我通过从当前父项中删除img并将其放在新父项（目标）中来实现此目的。但是，当我使用jQuery的img将.appendTo()放入其新容器中时，该卡会捕捉到屏幕的一角。

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

当div移动到新的父级时，是否有理由将div捕捉到屏幕的一角？我想知道当我更改$(ui.draggable).css({'top' : '0', 'left' : '0'});的父级时，是否存在在幕后继承/丢失的css属性。

任何帮助都将不胜感激。

- 编辑 -

附加信息：虽然有人建议我只是将其添加到我的drop handler（可行） -

.animate()

我想{{1}}到这个位置，所以快照不是瞬间的。当卡片最终位于正确的位置时，它首先会卡入角落，然后轻松进入正确的位置。我想避免第一次碰到角落。

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/

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

1 个答案: