JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<ul class="sortable">
<li class="special">Item 1</li>
<li class="special">Item 2</li>
<li class="special">Item 3</li>
</ul>
CSS
li{
display:inline;
}
.sortable li {
cursor: pointer;
list-style: none;
border: 1px solid #CCC;
background: #F6F6F6;
margin: 5px;
padding: 5px;
height: 22px;
}
.sortable {
color:red;
}
JavaScript
$(function() {
$( ".sortable" ).sortable({
start : function(e, ui){
if(ui.item.hasClass('special')){
$( ".sortable" ).sortable('option', 'items', ':not(.lock-me)');
}
},
stop : function(e, ui){
$( ".sortable" ).sortable('option', 'items', 'li');
}
});
});