-1

ドラッグ アンド ドロップ ゲームを年少の子供により適したものに変更するように言われました。

これを念頭に置いて、ドラッグ可能なものをクリックすることにしました。これにより、それらが目的の位置 (".drop-box.spellword") にアニメーション化されます。

このようなクリックイベントをどのように作成しますか..

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

* "left: 200px" ではなく".drop-box.spellword" *という領域にアニメーション化します。

「.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

アプローチはさまざまなオブジェクトのスタイルに依存するため、正しい答えを出すのは困難です。おそらく、次のようなものが機能する可能性があります。

$('#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 に答える
1

最初の文字をコンテナの位置にアニメーション化し、2 番目の文字を前の文字に対する相対的な位置にアニメーション化します。

.animate({
    top: $('.drop-box.spellword').offset().top,
    left: $('.drop-box.spellword').offset().left
 })
于 2012-08-09T14:30:11.853 に答える