JSFiddle - React, Tailwind, and code Playground

by Dwza

HTML

<table id="#our_table" border="1" cellspacing=0>
    <tr>
        <th></th>
        <th>Used</th>
        <th>Available</th>
    </tr>
    <tr>
        <td>Firstname</td>
        <td></td>
        <td rowspan=5>
            <span class="event" id="a" draggable="true">Firstname</span>
            <span class="event" id="b" draggable="true">Lastname</span>
            <span class="event" id="c" draggable="true">Street</span>
            <span class="event" id="d" draggable="true">Age</span>
            <span class="event" id="e" draggable="true">Country</span>
            <span class="event" id="f" draggable="true">Nickname</span>
            <span class="event" id="g" draggable="true">Phone</span>
        </td>
    </tr>
    <tr>
        <td>Lastname</td>
        <td></td>
    </tr>
    <tr>
        <td>Street</td>
        <td></td>
    </tr>
    <tr>
        <td>Zipcode</td>
        <td></td>
    </tr>
    <tr>
        <td>City</td>
        <td></td>
    </tr>
</table>

CSS

table th,
table td {
    height: 30px;
    width: 200px;
}

table span {
    display: block;
    background-color: #09C;
    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:not(:first-child)').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));
        };
    });
})