将jQuery draggable(）元素移动到新的父元素

Moving a jQuery draggable() element to a new parent

本文关键字：元素 移动 draggable jQuery      更新时间：2023-09-26

我正在用JavaScript编写一个简单的纸牌游戏，我希望在玩时有一个"纸牌"img捕捉到它的目标。我通过将img从其当前父对象中移除并将其放置在新的父对象（目标）中来实现这一点。然而，当我将img与jQuery的.appendTo()一起放置在其新容器中时，卡片会卡扣到屏幕的一角。

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

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

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

-编辑-

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

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

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

相关文章：