JSFiddle - React, Tailwind, and code Playground

by nickadeemus2002

HTML

<table id="tbl-columns" class="ui-sortable">
    <tbody>
        <tr class="nodrag nodrop">
            <td>
                <label for="Option_level">Option level</label>
            </td>
        </tr>
        <tr id="2">
            <td class="select-column">
            row 1 - Option
            </td>
        </tr>
        <tr class="nodrag nodrop">
            <td >
                <label for="Trade_level">Trade level</label>
            </td>
        </tr>
        <tr id="9">
            <td class="select-column">
                row 2 - Trade
            </td>
        </tr>
        <tr id="10">
            <td class="select-column">
                row 3 - Trade
            </td>
        </tr>
    </tbody>
</table>
<br/>
columns from Trade level should not be movable into Option level

CSS

#tbl-columns { margin: 5px 10px;border-collapse: collapse; width: 350px }
#tbl-columns tr[id] { border-top: 1px dotted #ddd;border-bottom: 1px dotted #ddd;cursor: move;}
tr.drag-class td { background-color: #CD853F;color: #fff;}

JavaScript

$("#tbl-columns").sortable(
{
    items: "tr[id]",
    axis: 'y',
    cancel: ".nodrop",
    //containment: closest,
 });
 $("#tbl-columns").disableSelection();