-1

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

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

你会怎么做这样的点击事件..

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

动画到一个名为* “.drop-box.spellword”的区域*而不是动画“左：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;
}

谢谢！

4

2 回答 2

1

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

.animate({
    top: $('.drop-box.spellword').offset().top,
    left: $('.drop-box.spellword').offset().left
 })
于 2012-08-09T14:30:11.853 回答
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');

});
于 2012-08-09T14:34:54.857 回答