JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<h3 class="docs">List 1</h3>
 
<ul id="sortable1" class="connected">
    <li class="ui-state-default">Active LI 1</li>
    <li class="ui-state-default">Active LI 2</li>
    <li class="ui-state-default">Active LI 3</li>
</ul>
 
<h3 class="docs">List 2</h3>
 
<ul id="sortable2" class="connected">
    <li class="ui-state-default ui-state-disabled">Not active LI 1</li>
    <li class="ui-state-default ui-state-disabled">Not active LI 2</li>
</ul>

CSS

#sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 25px; zoom: 1; background: #eea;}
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 3px; width: 90%; }

JavaScript

$(function() {
    $("#sortable1").sortable();
    $("#sortable2").sortable({
        items: "li:not(.ui-state-disabled)"
    });

    $("#sortable1, #sortable2").sortable("option", "connectWith", ".connected").disableSelection();
});