JSFiddle - React, Tailwind, and code Playground

HTML

<table id="#our_table" border="1">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <td><span class="event" id="item1" draggable="true">Item 1</span>
        </td>
        <td><span class="event" id="item2" draggable="true">Item 2</span>
            <span class="event" id="item3" draggable="true">Item 3</span>
        </td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

CSS

table th, table td {
    width: 200px;
    height:70px;
}
table span {
    display:block;
    background-color: #ccc;
    border: 1px solid black;
    color: fff;
    height: 30px;
    width: 100%;
}

JavaScript

$(document).ready(function () {
    $('.event').on("dragstart", function (event) {
        var dt = event.originalEvent.dataTransfer;
        dt.setData('Text', $(this).attr('id'));
    });
    $('table td').on("dragenter dragover drop", function (event) {
        event.preventDefault();
        if (event.type === 'drop') {
            var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'));
            de = $('#' + data).detach();
            de.appendTo($(this));

        };
    });
})