创建动画路径

Question

我刚刚被告知要改变我的拖放游戏，使其更适合年幼的孩子。

考虑到这一点，我决定单击可拖动对象，这将触发它们动画到所需的位置（".drop-box.spellword"）。

您将如何制作这样的点击事件..

    $(".drag").click(function() {
    $(".drag").animate({"left": "+=-200px"}, "slow");
});

动画化到名为 *".drop-box.spellword"* 的区域，而不是动画化"left： 200px"。

以下是".drag"的样式...

.squares .box-style {       
background: #176BC9;
color: white;
font-family: arial;
font-size: 35pt;
text-align: center;
width: 60px;
height: 60px;
border: 1pt solid white;  
cursor: move;
opacity: 1;
line-height: 56px;
}
.drag {
display:block;
height:61px;
line-height:25px;
width:61px;
text-align: center;
background:#ddd;    
float:left;  
-webkit-transition: -webkit-transform 0.1s ease-in;
}

谢谢！

Answer 1

很难给你一个正确的答案，因为这种方法取决于你对各种对象的样式。也许这样的事情可能会起作用：

$('#a').on('click', function(e){
    e.preventDefault();
    var targetPos  = $('.drop-box.spellword').offset();
    var currentPos = $(this).offset();
    $(this).css({
        'position' : 'absolute',
        'top' : currentPos.top,
        'left': currentPos.left
    });
    $(this).animate({
        top  : targetPos.top,
        left : targetPos.left
    }, 'fast');
});

Answer 2

将第一个字母设置为容器的位置，将第二个字母设置为相对于前一个的位置。

.animate({
    top: $('.drop-box.spellword').offset().top,
    left: $('.drop-box.spellword').offset().left
 })