JSFiddle - React, Tailwind, and code Playground

by drewP

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css">
<ul>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
</ul>

CSS

body {
    padding: 20px;   
}

ul li, .placeholder { 
    border: solid 1px #cccccc;
    background-color: #e5e5e5;
    border-radius: 4px;
    font-size: 1.3em;
    text-shadow: 0px 1px 0px #ffffff;
    color: #555555;
    width: 60px;  
}

ul li {
    float:left; 
    margin-right: 30px;
    padding: 40px;    
}
.placeholder {
    opacity: 0.5;    
}

JavaScript

$(function() {
    $("ul").sortable({
        placeholder: "placeholder",
        sort: function(event,ui) {
            var placeholder = ui.placeholder;
            var index = ui.placeholder.index();
            placeholder.text(index);            
        }            
    }); 
});