JSFiddle - React, Tailwind, and code Playground

HTML

<table class="grid">
     <tr>
         <td class="value">Drag</td>
         <td>Next</td>
     </tr>
     <tr>
         <td>1</td>
         <td>2</td>
         <td>3</td>
         <td>4</td>
         <td>5</td>
     </tr>
</table>

CSS

td{
    padding: 50px;
    border: 1px solid black;
}

JavaScript

function allElementsFromPoint(x, y) {
    var element, elements = [];
    var old_visibility = [];
    while (true) {
        element = document.elementFromPoint(x, y);
        if (!element || element === document.documentElement) {
            break;
        }
        elements.push(element);
        old_visibility.push(element.style.visibility);
        element.style.visibility = 'hidden'; // Temporarily hide the element (without changing the layout)
    }
    for (var k = 0; k < elements.length; k++) {
        elements[k].style.visibility = old_visibility[k];
    }
    elements.reverse();
    return elements;
}

$('.value').draggable({
    cursor: "move",
    containment: ".grid",
    snap: "td",
    start: function(event, ui) {
    },
    stop: function(event, ui) {

        $('.grid td').css({'background': 'none'});
        var el = allElementsFromPoint(event.pageX, event.pageY);
        var td = $(el).filter('td').not($(this));
        td.css({'backgroundColor': 'red'});
    }
});