<div class="sortOrder" style="max-width: max-content; margin:0px auto;" ondrop="drop(event, this)" ondragover="allowDrop(event)">
    <div draggable="true" ondragstart="drag(event)">
        <table class="table" style="margin-bottom:1em; width: 100% !IMPORTANT;">
            <thead>
                <tr>
                    <th colspan="2">Table A</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>-</td>
                    <td>-</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div draggable="true" ondragstart="drag(event)">
        <table class="table" style="margin-bottom:1em; width: 100% !IMPORTANT;">
            <thead>
                <tr>
                    <th colspan="2">Table B</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>-</td>
                    <td>-</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div draggable="true" ondragstart="drag(event)">
        <table class="table" style="margin-bottom:1em; width: 100% !IMPORTANT;">
            <thead>
                <tr>
                    <th colspan="2">Table C</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>-</td>
                    <td>-</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div draggable="true" ondragstart="drag(event)">
        <table class="table" style="margin-bottom:1em; width: 100% !IMPORTANT;">
            <thead>
                <tr>
                    <th colspan="2">Table D</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>-</td>
                    <td>-</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
.sortOrder{
  border: solid 1px orange;
  padding:2em;
  
}

.table{
    background: #fff ;
    border-collapse: collapse !important;
    border: 1px solid #e5e5e5 !important;
    width: 350px !important;
    font-size: 0.95em !important;
    margin: 0 auto;
}

.table thead tr{
    border: none !important;
    background: Orange;
    color: #FFF;  
    
}
.table thead tr th{
    font-weight: 300;
    white-space: nowrap;
    padding: 6px 10px;
    font-size: 0.8rem;
    text-align:left;
}
.table tbody tr td{
    white-space: nowrap;
    padding: 6px 10px;
    font-size: 0.8rem;
    text-align:left;
    border: solid 1px #d1d1d1;
}
    function allowDrop(ev) {
        ev.preventDefault();
    }

    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev, el) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        el.appendChild(document.getElementById(data));
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.