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

Question

I am trying to implement a board game (with a chess-like board) where I have a pawn that I can drag over the board on a grid made of divs:

<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>

Script: I make an array with the cells of the table and then appends the cells to the table. This is just the relevant part of it:

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],
    })

The table is rather big (11x11), and I want to get the index of the cell where I drop the pawn in my array. In the end, I want to do this to check if the move was valid, ie, if the pawn moved a valid ammount of spaces in the table. So I need to get the index where the pawn starts and where the pawn stops after dragging.

All help is greatly appreciated.

PS: I know that jquery allows me to find the coordinates of the stoping position. But I want to identify the div where it stops, not the coordinates. I understand that I could make a function that translates coordinates to indexes of divs, but I think there should be a simpler way.

Answer 1

I think you should look into using 'droppable' from jQuery as well ( https://jqueryui.com/droppable/ http://api.jqueryui.com/droppable/ ). It will allow you to use the 'over' and 'drop' events. Correct me if I'm wrong, but I think you will be able to get the droppable element with these events.