JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="sortable1">
	<li class="ui-state-default">
        <select>
            <option>I'm a select field</option>
            <option>I'm a select field</option>
        </select>
        <input type="text" value="I'm an input field"></input>
    </li>
	<li class="ui-state-default ui-state-disabled">(I'm not sortable or a drop target)</li>
	<li class="ui-state-default ui-state-disabled">(I'm not sortable or a drop target)</li>
	<li class="ui-state-default">Item 4</li>
</ul>

<h3 class="docs">Cancel sorting (but keep as drop targets) and by the way break input fields etc</h3>

<ul id="sortable2">
	<li class="ui-state-default">
        <select>
            <option>I'm not getting mouse events any more</option>
            <option>I'm not getting mouse events any more</option>
        </select>
        <input type="text" value="Try to click me"></input>
    </li>
	<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
	<li class="ui-state-default ui-state-disabled">(I'm not sortable)</li>
	<li class="ui-state-default">Item 4</li>
</ul>

CSS

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

JavaScript

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

		$( "#sortable2" ).sortable({
			cancel: ".ui-state-disabled"
		});

		//$( "#sortable1 li, #sortable2 li" ).disableSelection();
	});