JSFiddle - React, Tailwind, and code Playground

by JoshuaIRL

HTML

<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<div class="demo">

<ul id="sortable">
    <li class="ui-state-default">1</li>
    <li class="ui-state-default">2</li>
    <li class="ui-state-default">3</li>
    <li class="ui-state-default">4</li>
    <li class="ui-state-default">5</li>
    <li class="ui-state-default">6</li>
    <li class="ui-state-default">7</li>
    <li class="ui-state-default">8</li>
    <li class="ui-state-default">9</li>
    <li class="ui-state-default">10</li>
    <li class="ui-state-default">11</li>
    <li class="ui-state-default">12</li>
</ul>

</div><!-- End demo -->



<div class="demo-description">
<p>
    To arrange sortable items as a grid, give them identical dimensions and
    float them using CSS.
</p>
</div><!-- End demo-description -->

CSS

#sortable { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
}
#sortable li { 
    margin: 3px 3px 3px 0; 
    padding: 1px; 
    float: left; 
    width: 100px; 
    height: 90px; 
    font-size: 4em; 
    text-align: center; 
}

JavaScript

$(function() {
    $( "#sortable" ).sortable({tolerance:'pointer'});
        $( "#sortable" ).disableSelection();
    });