javascript - 用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 是否在表中移动了有效数量的空格。所以我需要获取 pawn 开始的索引以及 pawn 拖动后停止的索引。

非常感谢所有帮助。

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

Answer 1

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