JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

<div class="items"></div>
<div id="sortable">
    <table align="center" cellpadding="0" cellspacing="0" border="0" width="300" bgcolor="red">
        <tr>
            <td>1</td>
        </tr>
        <tr>
            <td>Drag me down!</td>
        </tr>
    </table>
    <table align="center" cellpadding="0" cellspacing="0" border="0" width="300" bgcolor="d2d2d2">
        <tr>
            <td>2</td>
        </tr>
        <tr>
            <td>Oh hi there</td>
        </tr>
    </table>
</div>

CSS

#sortable {
    width: 300px;
    float:right;
}
.items {
    position:fixed;
    left:0px;
    top:0px;
    bottom:0px;
    width:200px;
    background: rgba(0, 0, 0, 0.5);
}

table{
    cursor: s-resize;
}

JavaScript

$("#sortable").sortable({
    axis: 'y'
});
$("#sortable").disableSelection();