JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Sortable Test</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <ul class="navigation">
            <li>1 not link <img src="http://static.jquery.com/org/images/jquery-project-logos-medium/user-interface.png" style="width:50px;" /></li>
            <li>2 not link <img src="http://static.jquery.com/org/images/jquery-project-logos-medium/user-interface.png" style="width:50px;" /></li>
            <li>3 not link <img src="http://static.jquery.com/org/images/jquery-project-logos-medium/user-interface.png" style="width:50px;" /></li>
            <li>4 not link <img src="http://static.jquery.com/org/images/jquery-project-logos-medium/user-interface.png" style="width:50px;" /></li>
            <li>5 not link <img src="http://static.jquery.com/org/images/jquery-project-logos-medium/user-interface.png" style="width:50px;" /></li>
            <li>6 not link <img src="http://static.jquery.com/org/images/jquery-project-logos-medium/user-interface.png" style="width:50px;" /></li>
        </ul>             
    </body>
</html>

JavaScript

$(function(){
    $('.navigation').sortable({
        delay: 100,
        distance: 5
    });
});