JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.8.22/jquery-ui.min.js"></script>
<p>3 cannot be swapped to the other lists</p>
<ul id="list1">
    <li>One</li>
    <li>Two</li>
    <li class="number">3</li>
</ul>
<ul id="list2">
    <li class="number">4</li>
    <li>Five</li>
    <li>six</li>
</ul>

CSS

body {
    font-family: Arial, Tahoma, San-Serif;
    font-size: 11px;
}
p {
    margin: 0 0 20px;
}
ul {
    float: left;
    margin: 0 20px 0 0;
    width: 100px;
}
li {
    background: #fff;
    border: solid 1px #ccc;
    padding: 10px;
}

JavaScript

$('#list1').sortable({
    connectWith: 'ul',
    stop: function (ev, ui) {
        if (ui.item.hasClass("number"))
            $(this).sortable("cancel");
    }
});

$('#list2').sortable({
    connectWith: 'ul',
});