JSFiddle - React, Tailwind, and code Playground

by Istvan Ozsvar

HTML

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<ul id="sortable">
	<li>You can move me. I'm free!</li>
  <li>You can move me. I'm happy!</li>
  <li data-state="lifeless" class="lifeless">You can't move me. I'm lifeless. :(</li>
  <li>You can move me. I'm footloose!!</li>
</ul>

CSS

#sortable { list-style-type: none; margin: 0; padding: 0; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.2em; height: 18px;  }
#sortable li { border:1px solid silver; width:20em; }
#sortable li.lifeless { color:red; }

JavaScript

$(function() {
		$('#sortable').sortable({ cursor:'n-resize' });
    $('#sortable').disableSelection();
    
    $('#sortable > li').mousedown(function() {
    	if($(this).data('state')=='lifeless') {
    		$('#sortable').sortable('disable');
    	}
			else {
				$('#sortable').sortable('enable');
			}
		});
    
});