<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.