JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<ul id="sortable">
    <li>Second Item</li>
    <li>Third Item</li>
     <li class="no_sort">First item</li>
</ul>

CSS

#sortable {
    list-style-type: none; 
}

#sortable li {
    border: 1px solid black;
    margin: 3px;
    padding: 3px;
    height: 22px;
}

.sortable_placeholder {
    border-color: #AAA !important;
}

JavaScript

$('#sortable').sortable({
		placeholder: 'sortable_placeholder',
		cancel: '.no_sort',
		opacity: 0.5,
		revert: 500,
		change: function(event, ui) {
			if (ui.placeholder.index() > 1) {
				$('.no_sort').before(ui.placeholder);
			}
		}
	});