用jquery拖动元素，获取div的停止位置和开始位置的索引

Question

我正在尝试实现一个棋盘游戏（带有类似国际象棋的棋盘），其中我有一个棋子，我可以将它拖到由 div 组成的网格上的棋盘上：

<div id="table">
    <div class="table_header" id ="table_header_top"> </div>
    <div class="separation" id="separacion_top"> </div>
    <div id="table_body"> </div>
    <div class="separation" id="separacion_bottom"> </div>
    <div class="table_header" id ="table_header_bottom"> </div>
</div>

脚本：我用表格的单元格创建一个数组，然后将单元格附加到表格中。这只是它的相关部分：

var table= []
var table_body = document.getElementById("table_body")
for(var f=1; f<=9;f++){
    for(var c=0;c<=8;c++){
        var cell = document.createElement("DIV");
        table_body.appendChild(cell);
        table.push(cell);
    }
}

    $(black_pawn).draggable({
        containment: $('#table_body'),
        grid:[70,70],
    })

表相当大（11x11），我想获取我在数组中放置棋子的单元格的索引。最后，我想这样做以检查移动是否有效，即典当是否移动了表中有效数量的空格。所以我需要获取 pawn 开始的索引和拖动后 pawn 的停止位置。

非常感谢所有帮助。

PS：我知道jquery可以让我找到停止位置的坐标。但我想确定它停止的 div，而不是坐标。我知道我可以制作一个将坐标转换为 div 索引的函数，但我认为应该有更简单的方法。

Answer 1

我认为你也应该考虑使用 jQuery 中的“droppable”（https://jqueryui.com/droppable/http://api.jqueryui.com/droppable/）。它将允许您使用 'over' 和 'drop' 事件。如果我错了，请纠正我，但我认为您将能够通过这些事件获得可放置元素。