JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="isSortableBlock">   
    <li>
        <span>Category</span>
        <ul id="category1" class="isSortable" style="border:1px solid blue;">
    <li class="ui-state-default">item1</li>
    <li class="ui-state-default">item2</li>
    <li class="ui-state-default">item3</li>
</ul>
    </li>

    <li>
        <span>Category 2</span>
        <ul id="category2" class="isSortable" style="border:1px solid blue;">
    <li class="ui-state-default">item1</li>
    <li class="ui-state-default">item2</li>
    <li class="ui-state-default">item3</li>
</ul>
    </li>
</ul>

CSS

.isSortable { list-style-type: none; margin: 10px; padding: 5px; width: 60%; }
    .isSortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
    html>body .isSortable li { height: 1.5em; line-height: 1.2em; }

JavaScript

$('ul.isSortableBlock').sortable();

$('ul.isSortable').each(function(){
        $(this).sortable({
            connectWith : $(this).attr('id')
        })
    });