Question

在我的文字游戏中，有一个包含3个字母单词的网格。

游戏的目的是通过点击侧面的相应字母来拼写单词。

当网格中的某个区域突出显示时，它会向用户显示要拼写的单词。用户单击网格侧面的字母，它们应移动到突出显示的区域。

我最近在下面一段代码中将“drop-box”更改为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/

Answer 1

问题是position()获取元素相对于其（偏移）父元素的位置 - 在您的情况下，每个drop-box div位于0,0与其包含td相对应。您需要的是包含td的{{1}}，而不是position()。

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

我已更改drop-box变量以引用父targetPos的位置，并将td类也应用于occupied。看看jsFiddle中的代码 - 它应该有意义。

将动画指向正确的位置

1 个答案: