JSFiddle - React, Tailwind, and code Playground

HTML

<table id="tableA">
    <tbody>
        <tr>
            <td id="A" draggable="true">Item A</td>
        </tr>
        <tr>
            <td id="B" draggable="true">Item B</td>
        </tr>
        <tr>
            <td id="C" draggable="true">Item C</td>
        </tr>
    </tbody>
</table>
<table id="tableB">
    <thead>
        <tr>
            <th></th>
            <th>Col 0</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Row 0</th>
            <td draggable="true"></td>
            <td draggable="true"></td>
            <td draggable="true"></td>
            <th scope="row">Row 0</th>
        </tr>
        <tr>
            <th scope="row">Row 1</th>
            <td draggable="true"></td>
            <td draggable="true"></td>
            <td draggable="true"></td>
            <th scope="row">Row 1</th>
        </tr>
        <tr>
            <th scope="row">Row 2</th>
            <td draggable="true"></td>
            <td draggable="true"></td>
            <td draggable="true"></td>
            <th scope="row">Row 2</th>
        </tr>
    </tbody>
</table>

CSS

table {
    border-collapse: collapse;
    margin: 32px;
}

table:first-child {
    float: left;
    margin-top: 0;
}

th, td {
    border: 1px solid #CCC;
    padding: 5px;
}

td.Droppable {
    background-color: #EEE;
}

[draggable] {
    cursor: move;
}

JavaScript

"use strict";

var dragEndHandler = function (e) {
};

var dragEnterHandler = function (e) {
    var id = e.dataTransfer.getData("text/plain");
    
    console.log(id);
};

var dragLeaveHandler = function (e) {
};

var dragOverHandler = function (e) {
    e.preventDefault();
};

var dragStartHandler = function (e) {
    console.log(this.id);
    
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/plain", this.id);
};

var dropHandler = function (e) {
    e.preventDefault();
};

(function () {
    var draggables = document.querySelectorAll("[draggable]"),
        droppables = document.querySelectorAll("#tableB td"),
        i = 0,
        element = null;
    
    for (; i < draggables.length; i++) {
        element = draggables[i];
        
        element.addEventListener("dragend", dragEndHandler);
        element.addEventListener("dragstart", dragStartHandler);
    };
    
    for (i = 0; i < droppables.length; i++) {
        element = droppables[i];
        
        element.addEventListener("dragenter", dragEnterHandler);
        element.addEventListener("dragleave", dragLeaveHandler);
        element.addEventListener("dragover", dragOverHandler);
        element.addEventListener("drop", dropHandler);
    };
})();

//$(function () {
    //$("table").on({
    //    dragend: dragEndHandler,
    //    dragstart: dragStartHandler
    //}, "[draggable]");
    //
    //$("table:last").on({
    //    dragenter: dragEnterHandler,
    //    dragleave: dragLeaveHandler,
    //    dragover: dragOverHandler,
    //    drop: dropHandler
    //}, "td");
    
    //$("table [draggable]").live("dragend", dragEndHandler).live("dragstart", dragStartHandler);
    
    //$("table:last td").live("dragenter", dragEnterHandler).live("dragleave", dragLeaveHandler).live("dragover", dragOverHandler).live("drop", dropHandler);
//});