JSFiddle - React, Tailwind, and code Playground

HTML

<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

<ul>
    <li><span>foo1</span></li>
    <li><span>foo2</span></li>
    <li><span>foo3</span></li>
    <li><span>foo4</span></li>
</ul>

CSS

li, .ph {
    float: left;
    width: 150px;
    height: 100px;
    border: 1px solid gray;
}

.ph {
    background-color: gray;
}

span {
    font-size: 50pt;
}

JavaScript

$('ul').sortable({ placeholder: 'ph',
                   tolerance:   'pointer' });