JSFiddle - React, Tailwind, and code Playground

by ndelavi

HTML

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

CSS

table {
    width: 330px;
    font-size: 0;/* eliminate spaces between TRs/TDs */
}
tr {
    display: inline;
}
td {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: green;
    border: 0;
    border: 3px solid white;
    font-size: 20pt;
    color: white;
    line-height: 100px;
    vertical-align: middle;
    text-align: center;
}

.dnd-highlight {
    width: 100px;
    height: 100px;
    border: 3px dashed red;
    background: none;
}

JavaScript

$('table').sortable({
    items: 'td', 
    placeholder: 'dnd-highlight'
});