JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fields">
<ul class="sortable">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
      <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>

</ul>
</div>

CSS

.ui-icon {float:left;margin-right:8px;}

JavaScript

$( ".sortable" ).sortable(
    {
        handle: '.ui-icon-arrowthick-2-n-s',
        items: 'li',
        containment: '#fields',
        forceHelperSize: true,
        forcePlaceHolderSize: true,
        start: function(e, ui) {
            ui.item.addClass('ui-state-highlight');
        },
        stop: function(e, ui) {
            ui.item.removeClass('ui-state-highlight');
        },
        update: function() {
            $('#ul > #fields').sortable('refreshPositions');
        }
    }
);