Javascript 将动画定向到正确的位置

在我的文字游戏中，有一个由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);

var行=”；
var spaceAvailInRow=numleters；
while（spaceAvailInRow）{
var word=getWordToFitIn（spaceAvailInRow，unusedShuffledWords）；
猜测[单词]=[]；
spaceAvailInRow-=字长度；
for（变量k=0；k

有人能告诉我为什么动画坏了现在我改变了这个

---

Fiddle:

问题在于

position（）

获取元素相对于其父元素（偏移量）的位置-在您的例子中，每个

下拉框

div都位于与其包含的

td

相关的0,0处。您需要的是包含

td

的

position（）

，而不是

下拉框

我已经改变了一些事情，小提琴可以在这里看到：

我已将
targetPos
变量更改为引用父
td
的位置，并将
occulated
类应用于该
td
。看看JSFIDLE中的代码——希望它能有意义。
但是现在，当单词是对的或错的@MassivePenguin时，wordglow样式不会生效。我重新给出了您的示例，只留下
已占用的
类，而只是更改
targetPos
引用。颜色变化问题源于您正在查看
数据字母
变量的
下拉框
，而该变量没有。您需要查找
target.parents（'td'）.data（'letter'）
。看：好吧，这就是为什么它把所有的东西都当作正确答案，而颜色是红色的@这是因为您在
下拉框
div中查找
数据字母
，而实际上它比
下拉框
div更深一层（a
div
）。将
$（this.data（“letter”）==$（this.find（“div”）.data（“letter”）
更改为
$（this.data（“letter”）==$（this.find（.drop box div”）.data（“letter”）
，它会起作用的-尽管如此，它仍然将错误答案视为正确答案。这可能与变量“拼写单词”@MassivePenguin有关吗