JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="list" class="connectedSortable simplelist">
    <li class="sortable-item">
        <input type="text" value="first one" />
        <img src="http://tinyurl.com/lpsqzpp
" title="move" class="handle" />
    </li>
    <li class="sortable-item">
        <input type="text" value="another one" />
        <img src="http://tinyurl.com/lpsqzpp
" title="move" class="handle" />
    </li>
    <li class="sortable-item">
        <input type="text" value="and another" />
        <img src="http://tinyurl.com/lpsqzpp
" title="move" class="handle" />
    </li>
</ul>

CSS

.simplelist img {
    vertical-align: top;
    cursor:n-resize;
}
.simplelist input[type="text"] {
    margin-top:10px;
}
.ui-state-highlight {
    height: 1.5em;
    line-height: 1.2em;
}

JavaScript

$("#list").sortable({
    connectWith: ".connectedSortable",
    items: '.sortable-item',
    handle: '.handle',
    placeholder: "ui-state-highlight",
    start: function (event, ui) {
        if (!valid()) {
            return false;
        }
    }
});

function valid() {
    // will always return false for testing
    alert("error found");
    return false;
}