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's position()，而不是drop-box's 。

我已经改变了一些东西，可以在这里看到小提琴：http: //jsfiddle.net/mHDkV/1/

我已将targetPos变量更改为引用 parent 的位置，并将类td也应用于该位置。看看 jsFiddle 中的代码——希望它是有意义的。occupiedtd

于 2012-10-30T13:30:29.633 回答