<div class="sortOrder" style="max-width: max-content; margin:0px auto;">
        <div id="table1" draggable="true" ondragstart="dragstart(event)" ondrop="drop(event, this)"
            ondragover="allowDrop(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 id="table2" draggable="true" ondragstart="dragstart(event)" ondrop="drop(event, this)"
            ondragover="allowDrop(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 id="table3" draggable="true" ondragstart="dragstart(event)" ondrop="drop(event, this)"
            ondragover="allowDrop(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 id="table4" draggable="true" ondragstart="dragstart(event)" ondrop="drop(event, this)"
            ondragover="allowDrop(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 dragstart(ev) {
            // save ID of dragged element in dataTransfer:
            ev.dataTransfer.setData("text", ev.target.id);
        }

        function drop(ev, el) {
            ev.preventDefault();
            const
                // ID of dragged element:
                data = ev.dataTransfer.getData("text"),
                // dragged element:
                dragged = document.getElementById(data),
                // where to drop after:
                dropped = el;
            // insert element having been dragged
            // behind element where it was dropped:
            dropped.insertAdjacentElement('afterend', dragged);
        }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.