JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

<div id="outer-container">
    <ul class="sortableList">
        <li>Drag 1</li>
        <li>Drag 2</li>
        <li>Drag 3</li>
        <li>Drag 4</li>
        <li>Drag 5</li>
        <li>Drag 6</li>
        <li>Drag 7</li>
        <li>Drag 8</li>
        <li>Drag 9</li>
        <li id="contain">
            <ul class="sortableSubList">
                <li>Drag ul-1</li>
                <li>Drag ul-2</li>
                <li>Drag ul-3</li>
                <li>Drag ul-4</li>
                <li>Drag ul-5</li>
                <li>Drag ul-6</li>
                <li>Drag ul-7</li>
                <li>Drag ul-8</li>
                <li>Drag ul-9</li>
            </ul>
        </li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
    </ul>
</div>

CSS

ul ul li {
    background-color:yellow;
    border:solid 1px;
    margin:0px !important;
    padding:0px !important;
}
.sortableList {
    max-height:300px;
    overflow-y:scroll;
    width:300px;
    margin-bottom: 5px;
}
.sortableSubList {
    max-height:100px;
    overflow-y:scroll;
        
}
ul li {
    background-color:green;
    border:solid 1px;
}

JavaScript

$(".sortableList").sortable({
    axis: 'y',
    containment: '#outer-container'
});
$(".sortableSubList").sortable({
    axis: 'y',
    containment: '#contain'
});