0

私の単語ゲームには、3 文字の単語のグリッドがあります。

ゲームの目的は、横にある対応する文字をクリックして単語を綴ることです。

グリッド内の領域が強調表示されると、綴る単語がユーザーに示されます。ユーザーがグリッドの横にある文字をクリックすると、強調表示された領域に移動するはずです。

最近、次のコードで「ドロップボックス」を div に変更したところ、アニメーションは文字をグリッドの上隅に移動してから正しい位置に移動します。

    var row = '<tr>';
    var spaceAvailInRow = numLetters;
    while (spaceAvailInRow) {
        var word = getWordToFitIn(spaceAvailInRow, unusedShuffledWords);
        guesses[word] = [];
        spaceAvailInRow -= word.length;

        for (var k = 0; k < word.length; ++k) {
            row += '<td data-letter="' + word[k] + '" data-word="' + word + '"><div class="drop-box"></div></td>';
        }
    }
    row += '</tr>';

    tbl.append(row);
}

$(".container").append(tbl);

これを変更した今、アニメーションが壊れた理由を誰か教えてもらえますか?

フィドル: http://jsfiddle.net/7Y7A5/27/

4

1 に答える 1

1

問題は、position()その（オフセット）親に対する要素の位置を取得することです。あなたの場合、各drop-boxdiv は、それを含む に対して相対的に 0,0 に配置されtdます。必要なtdのは、position()ではなく、含まれているdrop-boxです。

私は物事を少し変えました。フィドルはここで見ることができます: http://jsfiddle.net/mHDkV/1/

targetPos親の位置を参照するように変数を変更し、それにクラスをtd適用しました。jsFiddle のコードを見てみましょう。うまくいけば意味がわかるはずです。occupiedtd

于 2012-10-30T13:30:29.633 に答える