JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/jquery-ui.css">
<span>
    <table width="510" style="margin: 0px auto;" border="1">
    	<tbody>
      	<tr>
          <td>Position by dragging them to the desired position
          </td>
      	</tr>
      	<tr>
          <td>                                                                           
              <ul id="sortable">
                  <li class='ui-state-disabled'><span class='handle'>*</span>&nbsp;Not Sortable</li>
				<li><span class='handle'>*</span>&nbsp;Sortable 1</li>
				<li><span class='handle'>*</span>&nbsp;Sortable 2</li>
				<li><span class='handle'>*</span>&nbsp;Sortable 3</li>
				<li><span class='handle'>*</span>&nbsp;Sortable 4</li>
				<li><span class='handle'>*</span>&nbsp;Sortable 5</li>
			  </ul>
          </td>
        </tr>
      </tbody>
   </table>
</span>

CSS

#sortable 
       {
            display: inline-block; 
            vertical-align: top
       }
       #sortable li 
       {
           width: 480px;
       }  
       #sortable li.selected 
       {
            background-color: goldenrod
       }  
 
       .placeholder 
       { 
           border: 1px solid back; 
       }

JavaScript

$(function(){
	$("#sortable").on('click', 'li', function (e) {
    	if (e.ctrlKey || e.metaKey) {
            $(this).toggleClass("selected");
        } else {
            $(this).addClass("selected").siblings().removeClass('selected');
    	}
    });
    
    $('#sortable').sortable({
		cancel: '.ui-state-disabled',
        delay: 150, //Needed to prevent accidental drag when trying to select
        revert: 0,
        axis: "y",
        containment: 'parent',
        placeholder: 'placeholder',
        handle: '.handle',
        start: function (event, ui) { },
        beforeStop: function (event, ui) {
            if (ui.item.index() == 0) {
                $("#sortable").sortable("cancel");
            }
        },
        helper: function (e, item) {
            //if an unhighlighted item is dragged, it will deselect (unhighlight) everything else
            if (!item.hasClass('selected')) {
                item.addClass('selected').siblings().removeClass('selected');
            }

            //Pass the selected items to the `stop()` Function:
            //Clone the selected items into an array
            var elements = item.parent().children('.selected').clone();

            //Add a property to `item` called 'multidrag` that contains the 
            //selected items, then remove the selected items from the source list
            item.data('multidrag', elements).siblings('.selected').remove();

            //Now the selected items exist in memory, attached to the `item`,
            // so we can access them later when we get to the `stop()` callback
            //Create the helper
            var helper = $('<li/>');
            return helper.append(elements);
		},
		stop: function (e, ui) {
                    //access items that are stored in `item`s data
			var elements = ui.item.data('multidrag');

            //`elements` now contains the originally selected items from the source list (the dragged items)

            //Finally insert the selected...