Cell boundary highlighting during drag

A simple example of droppable cell boundary highlighting during drags.

HTML

<table>
    <tr>
        <td></td>
        <td>Coluna 1</td>
        <td>Coluna 2</td>
    </tr>
    <tr>
        <td>Linha 1</td>
        <td class="draggable droppable">Item 1</td>
        <td class="draggable droppable">Item 2</td>
    </tr>
    <tr>
        <td>Linha 2</td>
        <td class="draggable droppable">Item 3</td>
        <td class="draggable droppable">Item 4</td>
    </tr>
</table>

CSS

td {
    border: 1px solid black;
    padding: 6px;
}
table {
    width: 100%;
}
.draggable {
    background-color: #d0ffff;
    cursor: pointer;
}
.droppable {
    background-color: #ffffd0;
    border: 1px solid black;
}
.droppable td {
    padding: 10px;
    border: 1px solid black;
}
.droppable-above {
    border-top: solid 3px blue;
}
.droppable-below {
    border-bottom: solid 3px blue;
}

JavaScript

$(document).ready(function () {
    $(".draggable").draggable({
        helper: "clone",
        drag: function drag(ev) {}
    });
    $(".droppable").droppable({
        drop: function drop(ev, ui) {
            console.log(ui, this);
            
            var dropped = ui.draggable[0];
            var texto = dropped.innerText; // dá-lhe o texto do elemento arrastado
            this.innerHTML = texto;
            var coluna = $(this).index(); // dá-lhe o numero da coluna a começar em zero
            var linha = $(this).closest('tr').index(); // dá-lhe o numero da linhaa começar em zero

            var textoColuna = $('table tr:first td:eq(' + coluna + ')').text();
            var textoLinha = $('table tr:eq(' + linha + ') td:first').text();
            console.log(textoColuna, textoLinha);
        }
    });
});