JSFiddle - React, Tailwind, and code Playground

HTML

<body> 
 
<ul class='_lscolumn'> 
    <li>column1
        <ul class='_lswindow'> 
            <li>window1
                <ul class='_lslink'> 
                    <li>link1</li> 
                    <li>link2</li> 
                </ul> 
            </li> 
            <li>window2                
                <ul class='_lslink'> 
                </ul> 
            </li> 
            <li>window3
                <ul class='_lslink'> 
                    <li>link3</li> 
                    <li>link4</li> 
                </ul> 
            </li> 
        </ul> 
    </li> 
    <li>column2
        <ul class='_lswindow'> 
            <li>window4
                            <ul class='_lslink'> 
                                                                          </ul> </li> 
        </ul> 
    </li> 
    <li>column3
        <ul class='_lswindow'> 
            <li>window5
                            <ul class='_lslink'>
                </ul> </li> 
            <li>window6
                            <ul class='_lslink'> 
                                                                          </ul> </li> 
        </ul> 
    </li> 
</ul> 
 
</body>

CSS

@charset "utf-8";
body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
}
ul {
    list-style: none;
}
._lscolumn {
}
._lscolumn li {
    height: auto;
    float: left;
}
._lswindow {
    border: 1px solid green;
}
._lswindow li {
    float: none;
}
._lslink {
 min-height:20px;   
}

JavaScript

$('._lswindow').each( function() {
        $(this).sortable( {
            connectWith: '._lswindow',
            cancel: '._lslink'
        }).disableSelection();
    });
    
    $('._lslink').each( function() {
        $(this).sortable( {
            connectWith: '._lslink' }).disableSelection();
    });