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

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

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

Answer 2

很难给出正确答案，因为该方法取决于各种对象的样式。也许这样的事情可能有用：

$('#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');

});

创建动画路径

2 个答案: